一、js动态生成、删除tr

在页面的操作中，我们往往会对table进行操作，例如增加一行，删除一行。查过好多资料，有好多方法。在具体实践中，我所涉及的需求是：

通过对js方法add（）传参数，然后把参数按照顺序分别具体的自动添加在所tr上，然后点击tr的“删除”button来出发moveTr()对这一行进行删除操作。

具体代码如下，仅供参考：

//增加table中的“tr”，并给“td”赋值。
<script type="text/javascript">   
      var id; //此id是自己设置，用作删除
     function add(a,b,c,d,e,f){
         id++;
        var theTable = document.getElementById("table");//table的id
        var rowCount = theTable.rows.length; //获得当前表格的行数
        var row = theTable.insertRow(rowCount);//在tale里动态的增加tr
   row.id=id;
        var cell1 = row.insertCell(0);//在tr中动态的增加td
        cell1.innerHTML="<input type=\"text\" style=\"width:80%\" />";
        var cell2 = row.insertCell(1); //在tr中再动态的增加td
        cell2.innerText=e;  
        var cell3 = row.insertCell(2); //在tr中再动态的增加td
   //cell3.innerHTML="<input type=\"button\" value=\"删除\" class=\"btn\" onclick=\"moveTr('"+id+"');\" >";  //删除按钮
//删除图标
        var cell4 = row.insertCell(3);//在tr中动态的增加 一个id
//此行时隐藏行，有些字段不需要显示，但是必须存在
          
 //tr中内容居中显示
　　cell2.style.cssText="text-align:center";
　　cell3.style.cssText="text-align:center";
//tr隐藏
            }
        </script>
 
//删除table中的“tr”，并取出具体“td”的值。
<script type="text/javascript">
      function moveTr(id){
         var tb=document.getElementById('table01');   //获取table
        var tr=document.getElementById(id);  //根据id获取具体的tr
        var r = tb.rows;  //得到此table的所有行信息
       var a4 = r[tr.rowIndex].childNodes[3].innerText;//根据id查找兄弟属性值 tr.rowIndex为此行所在的行数
       var bool= window.confirm("您确定删除项目\""+a4+"\"吗?");
       if(bool){
//删除行
//调用此方法，对界面有些地方的value进行更新
          }
           else{
               return;
           }
        }
  </script>

 

二、子页面调父页面的js方法

在操作过程中，有时需要这样的做法：

在父页面需要动态增加tr，但是此tr需要在另外一张表选择，但在操作期间，父页面不可以刷新，不可以跳转，这就需要弹出窗口，然后在新的窗口中，选择checkbox的参数id（把checkbox的value设置为项目id，而不是序号），根据此id通过ajax异步操作来获取所需要的字段，来传递给js方法中，在js方法中调用父页面js方法，来对父页面实现动态的增加。

我所做的代码如下：

1、  弹出窗口代码：

window.open('<%=path%>/prolm/directorWorkshops/meetinginfoView.jsp?','','width=800,height=600,top='+(screen.height-750)/2+',left='+(screen.width-1010)/2+',status=yes,titlebar=no,toolbar=no,scrollbars=yes,resizable=no');

2、  调用父页面的js方法

 

function save(a,b){
    window.opener.document.getElementById("name").innerHTML="张三";
    window.opener.window.a(a,b);
  }

三、使用checkbox或id来获得table下所有tr的所有td

 

<script type="text/javascript">
    function getTr() {
       var str = "";
       var tab = document.getElementById("tableId");
       var rows = tab.rows;
       for ( var i = 1; i < rows.length; i++) {
//从第二行开始，第一行为标识
           var a1 = rows[i].cells[0].getElementsByTagName('input')[0].value;
           var a2 = rows[i].cells[1].getElementsByTagName('input')[0].value;
//第一、二列为input输入框
           var a3 = rows[i].childNodes[2].innerText;
           var a4 = rows[i].childNodes[3].innerText;
           var a5 = rows[i].childNodes[4].innerText;
           var a6 = rows[i].childNodes[5].innerText;
           var a7 = rows[i].childNodes[6].innerText;
       str = str + a1 + "||" + a2 + "||" + a3 + "||" + a4 + "||" + a5
                  + "||" + a6 + "||" + a7  + "|||";
       }
       document.getElementById("hidstr").value = str;
//此行是把所有的table信息赋值为一个隐藏域，属性为“hidstr”，在action可以直接取其值，然后再对其进行拆分。
    }
 
</script>

 

四、对js数组的去重

  

<script type="text/javascript">
    var strs = str.split("||");
       for ( var i = 0; i < strs.length; i++) {
           if(!json[strs[i]]){
              res.push(strs[i]);
              json[strs[i]] = 1;
       }
       }
       document.getElementById("unit_peo").value =res; 
    }
</script>