DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 動態添加刪除表格行的js實現代碼
動態添加刪除表格行的js實現代碼
編輯:JavaScript綜合知識     

 本篇文章主要是對動態添加刪除表格行的js實現代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

 代碼如下: <html> <head> <script language="javascript">   //窗口表格增加一行   function addNewRow(){    var tabObj=document.getElementById("myTab");//獲取添加數據的表格    var rowsNum = tabObj.rows.length;  //獲取當前行數    var colsNum=tabObj.rows[rowsNum-1].cells.length;//獲取行的列數    var myNewRow = tabObj.insertRow(rowsNum);//插入新行    var newTdObj1=myNewRow.insertCell(0);    newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";    var newTdObj2=myNewRow.insertCell(1);    newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";    var newTdObj3=myNewRow.insertCell(2);    newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";    var newTdObj4=myNewRow.insertCell(3);    newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";   } //窗口表格刪除一行   function removeRow(){    var chkObj=document.getElementsByName("chkArr");    var tabObj=document.getElementById("myTab");    for(var k=0;k<chkObj.length;k++){     if(chkObj[k].checked){      tabObj.deleteRow(k+1);      k=-1;     }    }   } </script> </head> <body> <input type="button" name="xx" onclick="addNewRow();" value="增加一行" /> <input type="button" name="yy" onclick="removeRow();" value="刪除一行" /> <table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">         <tr>          <td width="40px" class="top-bt liebiao-c" align="center" >操作</td>         <td width="40px" class="top-bt liebiao-c" align="center" >序號</td>         <td class="top-bt liebiao-c" align="center" >節點名稱</td>         <td width="80px" class="top-bt liebiao-c" align="center" >節點比例</td>        </tr>     </table> </body> </html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved