js对table的动态操作

转自:https://www.cnblogs.com/snow1314/p/3618274.html

一、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\" οnclick=\"moveTr('"+id+"');\" >";  //删除按钮

        Cell3.innerHTML="<a href=\"#\" title=\"删除\" οnclick=\"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>

 

二、子页面调父页面的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>