JavaScript DOM 如何删除表格中的行

在网页开发中，经常会遇到需要动态操作表格的情况，其中删除表格中的行是一个常见的需求。通过 JavaScript 的 DOM（文档对象模型）操作，我们可以轻松实现这一功能。

我们需要获取到要操作的表格元素。可以使用 document.getElementById() 方法来获取表格的引用。例如，假设我们的表格有一个 id 为 “myTable”，那么获取表格的代码如下：

const table = document.getElementById('myTable');

接下来，要删除表格中的行，我们有多种方式。一种常见的方法是通过获取要删除行的 tr 元素，然后使用 remove() 方法将其从 DOM 中移除。比如，如果我们要删除表格中的最后一行，可以这样实现：

const lastRow = table.rows[table.rows.length - 1];
lastRow.remove();

在上述代码中，table.rows 是一个包含表格所有行的集合。通过 table.rows.length - 1 我们可以获取到最后一行的索引，进而获取到最后一行的 tr 元素，再调用 remove() 方法将其删除。

另外，如果我们知道要删除行的某个特定属性或条件，比如某一行的 data-id 属性值为特定值时要删除该行，可以通过遍历表格的行来找到符合条件的行并删除。示例代码如下：

for (let i = 0; i < table.rows.length; i++) {
    const row = table.rows[i];
    if (row.dataset.id === '123') {
        row.remove();
        break;
    }
}

这段代码会遍历表格的每一行，检查 data-id 属性值是否为 “123”，如果是，则删除该行并跳出循环。

还有一种方式是使用 parentNode.removeChild() 方法来删除行。例如：

const rowToDelete = table.rows[2];
const parent = rowToDelete.parentNode;
parent.removeChild(rowToDelete);

这里先获取要删除的行，然后获取该行的父节点（即表格的 tbody 元素），最后使用 removeChild() 方法将该行从父节点中移除。

掌握这些 JavaScript DOM 操作技巧，能让我们在处理表格行的删除操作时更加得心应手，为网页添加更加流畅和交互性强的功能。无论是简单的删除固定行，还是根据复杂条件动态删除行，都可以通过合理运用这些方法轻松实现。