如何在表格中添加2行或更多行

Question

I have 3 rows, and 3 buttons in same table, I am trying to add new rows independent to each other. But it outputs the first rows while i click second or third button.
Here is the javascript code for first button and second button respectively.

function addRow(dataTable, id) {
  var table = document.getElementById('dataTable');
  var rowCount = table.rows.length;
  var row = table.insertRow(3);
  var colCount = table.rows[5].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[4].cells[i].innerHTML;
    document.getElementById("agri").style.visibility = "hidden"; // remove button from newly added row
  }
  document.getElementById("agri").style.visibility = "visible";
}

function addRow1(dataTable, id) {
  var table = document.getElementById('dataTable');
  var rowCount = table.rows.length;
  var row = table.insertRow(4);
  var colCount = table.rows[6].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[5].cells[i].innerHTML;
    document.getElementById("promotion").style.visibility = "hidden";  // remove button from newly added row
  }
  document.getElementById("promotion").style.visibility = "visible";
}

here is some html

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

Please Help
Thanks

Answer 1

You have errors

not

 var table = document.getElementById('dataTable');

but, because I think you use dataTable as variable not string

var table = document.getElementById(dataTable);

Also put your html code with table

Answer 2

如何添加row属性并根据元素编号更改其值

Answer 3

   <script>
  var ii=0;
   function addRow(dataTable, id, type) {
   ii++       
   console.log(id);

     var table = document.getElementById(dataTable);

     var row = table.insertRow(id+parseInt(type));
     var colCount = table.rows[id].cells.length;

     for (var i = 0; i < colCount; i++) {
       var newcell = row.insertCell(i);
       newcell.innerHTML = table.rows[id].cells[i].innerHTML;

   table.rows[id].cells[i].querySelector('input').value=ii.toString();

   if(type==1) 
   table.rows[id].cells[i].style.backgroundColor='red';      
   else
   table.rows[id].cells[i].style.backgroundColor='blue';

     }

   }

   </script>

   <table id="dataTable">
   <tr>1
   <td><input type="button" id="agri" value="Add Row after" onclick="addRow('dataTable',this.parentNode.parentNode.rowIndex,'1')" /></td>
   <td><input type="button" id="agri2" value="Add Row before" onclick="addRow('dataTable',this.parentNode.parentNode.rowIndex,'-1')" /></td>

   </tr>

   </table>