js操作新增和删除行同时重写编号和每行的id和name值

   

html代码如下

    <tr class='text-center'  style="border-bottom:0px"> 
      <td style="border-bottom:0px" ><input name="nums" type="text" style="border: 0;background-color: white"  size=3   value="<?php echo 1;?>"  readOnly></td>
      <td style="border-bottom:0px"><?php echo html::input("comments[1]", $todo->comment, "class='form-control'");?></td>
      <td style="border-bottom:0px"><?php echo html::input("timeConsumings[1]", $timeConsuming, "οnchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td>
      <td style="border-bottom:0px"><?php echo html::input("spareTimes[1]", $spareTime, "οnchange='isAbs(this.value,this)'  class='form-control'  autocomplete='off'");?></td>
      <td style="border-bottom:0px">
      <?php ?>
      <?php echo html::selectlogs("taskId[1]", $tasks, $todo->taskId, "class='form-control'");?></td>
     
           <td class='text-center w-100px' style="border-bottom:1px;border-color: red">
            <a href='javascript:void()' class='btn-icon' οnclick='addItem(this)'><i class='icon-plus'></i></a>
            <a href='javascript:void()' οnclick='delItem(this)' class='btn-icon'><i class='icon-remove'></i></a>
          </td>
     
    </tr>  

    <?php for($i = 2; $i < 6; $i++):?>
    <tr class='text-center'>
      <td><input name="nums" type="text" style="border: 0;background-color: white"    size=3 value="<?php echo $i;?>" readOnly></td>
      <td><?php echo html::input("comments[$i]", $todo->comment, "class='form-control'");?></td>
      <td><?php echo html::input("timeConsumings[$i]", $timeConsuming, "οnchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td>
      <td><?php echo html::input("spareTimes[$i]", $spareTime, "οnchange='isAbs(this.value,this)'  class='form-control'  autocomplete='off'");?></td>
      <td style="border-bottom:0px">
      <?php ?>
      <?php echo html::selectlogs("taskId[$i]", $tasks, $todo->taskId, "class='form-control'");?></td>
           <td class='text-center w-100px'  style="">
            <a href='javascript:void()' class='btn-icon' οnclick='addItem(this)'><i class='icon-plus'></i></a>
            <a href='javascript:void()' οnclick='delItem(this)' class='btn-icon'><i class='icon-remove'></i></a>
          </td>
    </tr>  
   <?php endfor;?>

js代码

添加行

function addItem(clickedButton)
{
	 //复制tr
	   var myTable = document.getElementById("myTable");
	   var ls = myTable.rows.length-3;
	   var newTr = myTable.rows[1].cloneNode(true);
	   
	   var tds = newTr.getElementsByTagName("td");
	   var len= ls+1;
	   var nums = document.getElementsByName("nums");


	   
	  var rowiner = Number(nums[nums.length-1].value)+1;


	  
	
	   for (var i = 0; i < tds.length; i++) {
		   if(i==0){
			   tds[i].getElementsByTagName("input")[0].value=rowiner;
			  
		   }else if(i==1){
			   tds[i].getElementsByTagName("input")[0].id="comments["+rowiner+"]";
			   tds[i].getElementsByTagName("input")[0].name="comments["+rowiner+"]";
			   tds[i].getElementsByTagName("input")[0].value="";
		   }else if(i==2){
			   tds[i].getElementsByTagName("input")[0].id="timeConsumings["+rowiner+"]";
			   tds[i].getElementsByTagName("input")[0].name="timeConsumings["+rowiner+"]";
			   tds[i].getElementsByTagName("input")[0].value="0";
		   }else if(i==3){
			   tds[i].getElementsByTagName("input")[0].id="spareTimes["+rowiner+"]"; 
			   tds[i].getElementsByTagName("input")[0].name="spareTimes["+rowiner+"]"; 
			   tds[i].getElementsByTagName("input")[0].value="0"; 
		   }else if(i==4){
			   tds[i].getElementsByTagName("select")[0].id="taskId"+rowiner+"";  
			   tds[i].getElementsByTagName("select")[0].name="taskId["+rowiner+"]"; 
			   rowiner++;
		   }


	   }


		 
	   myTable.appendChild(newTr);
	   
	   var nums = document.getElementsByName("nums");


      for (var j = 0; j < nums.length; j++) 
      {


      	 nums[j].value=j+1;
      	
      }
	   
	   
	   
}

删除行js

function delItem(clickedButton)
{
	var nums = document.getElementsByName("nums");
 if(nums.length>1){
		
	
   $(clickedButton).parent().parent().remove();
	   
   for (var j = 0; j < nums.length; j++) 
   {
	   	 
	  var ss = nums[j].value;
	  var as = j+1; 
	  nums[j].value=as;
	 	document.getElementById("timeConsumings["+ss+"]").id="timeConsumings["+as+"]";
	 	document.getElementById("timeConsumings["+as+"]").name="timeConsumings["+as+"]";
	 	document.getElementById("comments["+ss+"]").id="comments["+as+"]";
	 	document.getElementById("comments["+as+"]").name="comments["+as+"]";
	 	document.getElementById("spareTimes["+ss+"]").id="spareTimes["+as+"]";
	 	document.getElementById("spareTimes["+as+"]").name="spareTimes["+as+"]";
	 	document.getElementById("taskId"+ss).id="taskId"+as;
	 	document.getElementById("taskId"+as).name="taskId["+as+"]";
	 	
   	 
   }
   
 }else{
	 alert("最后一条不允许删除。");
 } 
   


}