javascript - 如何使用 Javascript 在 HTML 表格中创建新行？

Question

我正在尝试使用 javascript 函数创建一个新行。我已经回顾了之前回答的所有问题，但没有一个对我有帮助。如果这有帮助，这是我的代码:

var deleteRow = document.getElementsByClassName('gone');

function removeParent(){
  this.parentNode.parentNode.remove();
}

for(var i = 0; i < deleteRow.length; i++) {
  deleteRow[i].addEventListener("click", removeParent);
}

var addRow = document.getElementsByClassName('add');

function addRow(){
  var deleteRow = table.insertRow(0);
}

for(var i = 0; i < addRow.length; i++) {
  addRow[i].addEventListener("click", addRow);
}

Answer 1

试试这个代码

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(0);
}

并使用这个 html

<p>Click the buttons to create and delete row(s) for the table.</p>

<table id="myTable">
   <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
   </tr>
   <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
   </tr>
   <tr>
      <td>Row3 cell1</td>
      <td>Row3 cell2</td>
   </tr>
</table>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>