Html表使用javascript动态添加和删除行[关闭]答案

【问题标题】：Html table add and delete rows dynamically with javascript [closed]Html表使用javascript动态添加和删除行[关闭]
【发布时间】：2021-08-28 18:52:22
【问题描述】：

我希望有一个最初没有行的表，然后动态创建每一行并能够删除每一行。我得到无法读取未定义的属性“childNodes” 请告诉我应该怎么做，谢谢。

function addRow() {
  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 deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];

      table.deleteRow(i);
      rowCount--;
      i--;
    }
  } catch (e) {
    alert(e);
  }
}

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

  <table id="myTable">
    <TR>

    </TR>
  </table>
  <br>

  <button type="button" onclick="addRow()">Add</button>
  <button type="button" onclick="deleteRow('myTable')">Delete</button>

</body>

</html>

【问题讨论】：

该表名为myTable，而不是tableData。
@Barmar 说了什么，然后编辑这一行：table.deleteRow(row);

标签： javascript html html-table innerhtml

【解决方案1】：

<button type="button" onclick="deleteRow('myTable')">Delete</button>

只是传入了错误的表 ID。

【讨论】：

TypeError: 无法读取具有正确表 ID 的未定义属性“childNodes”。
@Cameron121341 听起来像是另一个问题的不同问题