js对table的动态操做

1、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+"');\" >";  //删除按钮

        Cell3.innerHTML="<a href=\"#\" title=\"删除\" onclick=\"moveTr('"+id+"');\"><i class=\"icon-trash\"></i></a>";  //删除图标

        var cell4 = row.insertCell(3);//在tr中动态的增长 一个id

        cell4.innerHTML="<input value=\""+f+"\"/>";  //此行时隐藏行，有些字段不须要显示，可是必须存在

          

      cell1.style.cssText="text-align:center";     //tr中内容居中显示

　　cell2.style.cssText="text-align:center";

　　cell3.style.cssText="text-align:center";

　　cell14.style.cssText="display:none;"      //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){

             tb.deleteRow(tr.rowIndex);  //删除行

              unit(); //调用此方法，对界面有些地方的value进行更新

          }

           else{

               return;

           }

        }

  </script>

 

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

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

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

我所作的代码以下：

一、  弹出窗口代码：

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');

二、  调用父页面的js方法

  function save(a,b){

    window.opener.document.getElementById("name").innerHTML="张三";

    window.opener.window.a(a,b);

  }

3、使用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;

//第1、二列为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>

 

4、对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>