動態添加刪除表格行的js實現代碼

2024-05-06 16:01:51

字體：大中小

來源：轉載

供稿：網友

本篇文章主要是對動態添加刪除表格行的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'"+rowsNum+" />";
   var newTdObj2=myNewRow.insertCell(1);
   newTdObj2.innerHTML="<input type='text'"+rowsNum+" value='"+rowsNum+"'/>";
   var newTdObj3=myNewRow.insertCell(2);
   newTdObj3.innerHTML="<input type='text'"+rowsNum+" />";
   var newTdObj4=myNewRow.insertCell(3);
   newTdObj4.innerHTML="<input type='text'"+rowsNum+" />";
}
//窗口表格刪除一行
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" value="增加一行" />
<input type="button" value="刪除一行" />
<table cellpadding="0" cellspacing="0">
        <tr>
         <td >操作</td>
        <td >序號</td>
        <td >節點名稱</td>
        <td >節點比例</td>
       </tr>
    </table>
</body>
</html>