📌  相关文章
📜  HTML | DOM 表 deleteRow() 方法(1)

📅  最后修改于: 2023-12-03 15:01:13.171000             🧑  作者: Mango

HTML | DOM 表 deleteRow() 方法

介绍

HTML 表格（Table）是网页制作中非常重要的元素之一，而 DOM 表（DOM Table）是通过 JavaScript 操作 HTML 表格的重要工具。其中，deleteRow() 方法是 DOM 表对象自带的一个方法，用于删除 HTML 表格中的一行。

语法
table.deleteRow(index)

参数：

  • index：表示要删除的行在当前表格中的索引值，从 0 开始计数。
返回值
  • 无。
示例

以下示例演示如何使用 deleteRow() 方法删除一个 HTML 表格的第一行：

<!DOCTYPE html>
<html>
<body>

<table id="myTable" border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

<button onclick="deleteRow()">删除第一行</button>

<script>
function deleteRow() {
  var table = document.getElementById("myTable");
  table.deleteRow(0);
}
</script>

</body>
</html>

在这个示例中，我们创建了一个包含两行两列的 HTML 表格，并在页面中添加了一个按钮。当按钮被点击时，再调用 deleteRow() 方法删除表格中的第一行。

注意事项
  • 如果要删除的行是表格的最后一行，那么使用 deleteRow() 方法会报错，需要使用 HTML 表格对象的 deleteRow() 方法，如 document.getElementById("myTable").deleteRow(-1)。
  • 删除行后，行索引值将重新计数，因此在处理相关数据时需要注意行数的变化。
参考文献