javascript

Dynamically add js implementation code to delete table rows

<html>
<head>
<script language="javascript">
 //Add a row to the window table
  function addNewRow(){
   var tabObj=document.getElementById("myTab");//Gets the table to add the data
   var rowsNum = tabObj.rows.length;  //Gets the current number of rows
   var colsNum=tabObj.rows[rowsNum-1].cells.length;//Gets the number of rows and columns
   var myNewRow = tabObj.insertRow(rowsNum);//Insert a new row
   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' />";
  }
//Delete a row from the window table
  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=" Add a line " />
<input type="button" name="yy" onclick="removeRow();" value=" To delete a line " />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
        <tr>
         <td width="40px" class="top-bt liebiao-c" align="center" > operation </td>
        <td width="40px" class="top-bt liebiao-c" align="center" > The serial number </td>
        <td class="top-bt liebiao-c" align="center" > The name of the node </td>
        <td width="80px" class="top-bt liebiao-c" align="center" > Node ratio </td>
       </tr>
    </table>
</body>
</html>