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>