如何乘以和检查新插入的行

Question

我想添加具有3个输入字段的新行，并检查2字段的乘法是否等于第三个输入字段。但我的问题是，如果我检查前2个输入字段的乘法，结果将影响第二行和第三行等因为它们都具有相同的id，用户可以添加许多行。

如何使用不同的ID或不受影响进行检查。我的一些代码如下：

        function addRow(elem,id) {
  var trElement = elem.parentElement.parentElement;
  var tr = document.getElementsByTagName('tr');
  tr = Array.prototype.slice.call(tr);
  var a = tr.indexOf(trElement);
  var b = a+1; 
	
           var table = document.getElementById('dataTable');
			var j, m;
			
           var rowCount = table.rows.length;
		   var row = table.insertRow(a);
 	       var colCount = table.rows[b].cells.length;
           for(var i=0; i<colCount; i++) {
           var newcell = row.insertCell(i);		 
           newcell.innerHTML = table.rows[b].cells[i].innerHTML; 			
             
		   
			  }
		    }   
  

<table width="100%" id="dataTable">
  <tr>
   <td><input name="" type="text" /></td>
   <td><input name="" type="text" /></td>
   <td><input name="" type="text" /></td>

  </tr>
  <tr>
    <td><input name="" type="text" /></td>
    <td><input name="" type="text" /></td>
    <td><input name="" type="text" /></td>
    
  </tr>
  
</table>

<input type="button" id="agri" value="Add Row"  onclick="addRow(this,id)" />

感谢提前

Answer 1

我希望它可以帮到你; 结果如下：

＆＃13;

＆＃13;

function addRow(elem,id) {
  var trElement = elem.parentElement.parentElement;
  var tr = document.getElementsByTagName('tr');
  tr = Array.prototype.slice.call(tr);
  var a = tr.indexOf(trElement);
  var b = a+1; 
	
           var table = document.getElementById('dataTable');
			var j, m;
			
           var rowCount = table.rows.length;
		   var row = table.insertRow(a);
 	       var colCount = table.rows[b].cells.length;
           for(var i=0; i<colCount; i++) {
           var newcell = row.insertCell(i);		 
           newcell.innerHTML = table.rows[b].cells[i].innerHTML; 			
             
		   
			  }
		    }

function cheakMulti() {
  r = document.getElementsByTagName('tr');
  for (i = 0; i < r.length; i++) 
  {
  	if(r[i].children[2].children[0].value==r[i].children[1].children[0].value*r[i].children[0].children[0].value)
    	{
	r[i].children[2].children[0].style.backgroundColor="green";
	}
	else
	{
	r[i].children[2].children[0].style.backgroundColor="red";
	}

  }


}

＆＃13;

<table width="100%" id="dataTable">
  <tr>
   <td><input name="" type="text" /></td>
   <td><input name="" type="text" /></td>
   <td><input name="" type="text" /></td>

  </tr>
  <tr>
    <td><input name="" type="text" /></td>
    <td><input name="" type="text" /></td>
    <td><input name="" type="text" /></td>
    
  </tr>
  
</table>

<input type="button" id="agri" value="Add Row"  onclick="addRow(this,id)" />

<input type="button" id="agri" value="Cheak"  onclick="cheakMulti(this,id)" />

＆＃13;

＆＃13;

＆＃13;