如何使用JavaScript DOM删除表格中的行？

概述

在Web开发过程中，表格经常是页面中展示数据的重要方式。但在实际应用中，我们可能需要删除表格中特定的一行或多行，这时候可以使用JavaScript DOM进行操作，本文将介绍如何使用JavaScript DOM删除表格中的行。

准备工作

在开始操作之前，我们需要先准备一个简单的HTML表格，如下所示：

<table id="myTable">

  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>男</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>女</td>
    <td>20</td>
  </tr>
  <tr>
    <td>小刚</td>
    <td>男</td>
    <td>22</td>
  </tr>
</table>

表格中包含了三列，第一行是表头，后面两行是数据。接下来我们将学习如何使用JavaScript DOM删除表格中的一行或多行。

删除指定行

删除指定行，通常需要先获取到需要删除的行的元素，然后调用其remove()方法进行删除。在本例中，我们可以通过给每行元素添加一个id属性，然后通过document.getElementById()方法获取到指定行的元素。实现代码如下：

// 获取需要删除的行的元素

var row = document.getElementById("row-to-delete");
// 从表格中删除指定行
row.remove();

需要注意的是，如果表格中包含多个相同的元素，如下所示：

<table id="myTable">

  <tr id="1">
    <td>1</td>
    <td>John</td> 
    <td>Doe</td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>Mary</td> 
    <td>Moe</td>
  </tr>
  <tr id="1">
    <td>3</td>
    <td>July</td> 
    <td>Dooley</td>
  </tr>
</table>

此时获取指定元素时只能获取到第一个匹配的元素，如果需要删除其他相同元素，需要使用其他方法进行获取。下面给出的例子可以删除表格中的任意一行，代码实现如下：

function deleteRow(rowId) {

  // 获取需要删除的行的元素
  var row = document.getElementById(rowId);
  
  // 从表格中删除指定行
  row.remove();
}
// 删除表格中的第2行
deleteRow("2");

在这个例子中，我们将删除行的代码封装成一个名为deleteRow()的函数，函数中传入需要删除的行的id。

删除多个行

如果需要删除多行，可以将需要删除的行的ID存储在一个数组中，然后使用for循环依次删除。例如，删除第1行和第3行的代码如下：

var rowsToDelete = ["1", "3"];

for (var i = 0; i < rowsToDelete.length; i++) {
  // 获取需要删除的行的元素
  var row = document.getElementById(rowsToDelete[i]);
  // 从表格中删除指定行
  row.remove();
}

删除全部行

有时候我们需要删除表格中所有行，可以通过获取表格中所有行的元素，然后依次调用其remove()方法实现。获取所有行的元素可以使用getElementsByTagName()方法获取，实现代码如下：

var table = document.getElementById("myTable");

var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
  rows[i].remove();
}

在这个例子中，我们使用了getElementsByTagName()方法获取所有<tr>元素，并从下标1开始循环删除，这是因为下标0是表头，不需要删除。

总结

通过本文我们了解了如何通过JavaScript DOM删除表格中的行，主要包括删除指定行、删除多个行和删除全部行。开发者应该根据实际需求选择合适的方法。