HTML 使用JavaScript动态地添加/删除表格行

在本文中，我们将介绍如何使用JavaScript动态地添加和删除HTML表格的行。HTML是一种用于创建网页的标记语言，而JavaScript是一种用于与网页交互的脚本语言。通过结合使用这两种技术，我们可以实现在不刷新整个页面的情况下，动态地增加和删除表格行。

阅读更多：HTML 教程

添加表格行

要动态地添加HTML表格行，我们需要使用JavaScript来创建一个新的表格行对象，并将其追加到表格中。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

<br>

<button onclick="addRow()">添加行</button>

<script>
function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "王五";
  cell2.innerHTML = "35";
}
</script>

</body>
</html>

在上面的示例中，我们定义了一个包含三行两列的表格，并在表格下方添加了一个按钮。点击按钮时，addRow()函数会被调用。该函数首先获取到表格对象，并使用insertRow()方法在表格的最后添加一行。然后，我们使用insertCell()方法在新行中插入两个单元格，并使用innerHTML属性为这两个单元格赋值。

删除表格行

要动态地删除HTML表格的行，我们需要使用JavaScript找到要删除的行，并将其从表格中移除。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
</table>

<script>
function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
</script>

</body>
</html>

在上面的示例中，我们在每一行的最后添加了一个按钮，点击按钮时会调用deleteRow(this)函数。通过this关键字，我们可以获取到点击按钮所在的行对象。然后，使用parentNode属性找到父节点，即表格行的父元素，并使用removeChild()方法将该行从表格中移除。