js 清空table内容

在JavaScript中清空表格（<table>）内容通常指的是移除表格中的所有行（<tr>），但保留表格的结构（即表头 <thead> 和表体 <tbody>）。以下是实现这一功能的几种方法：

1. 使用 `innerHTML`

这是最简单的方法之一，通过将 <tbody> 的 innerHTML 设置为空字符串来清空表格内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清空表格示例</title>
</head>
<body>
    <table id="myTable" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
    <button onclick="clearTable()">清空表格</button>

    <script>
        function clearTable() {
            const table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
        }
    </script>
</body>
</html>

优点：

简单快捷，适用于快速清空表格内容。

缺点：

如果表格中有事件监听器或需要保留某些状态，这种方法会移除所有子节点及其事件。

2. 使用 `while` 循环移除行

通过循环不断移除 <tbody> 中的最后一个子节点，直到没有子节点为止。

function clearTable() {
    const tbody = document.querySelector('#myTable tbody');
    while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
    }
}

优点：

更加灵活，可以在移除过程中执行额外的操作。
不会影响事件监听器或其他状态。

缺点：

相对于 innerHTML 方法，代码稍显复杂。

3. 使用 `deleteRow` 方法

deleteRow 方法可以删除指定索引的行，通过从最后一行开始删除，可以避免索引变化带来的问题。

function clearTable() {
    const tbody = document.querySelector('#myTable tbody');
    while (tbody.rows.length > 0) {
        tbody.deleteRow(0);
    }
}

优点：

清晰地表达了删除行的意图。
可以与索引结合使用，适用于需要删除特定行的场景。

缺点：

需要遍历所有行，性能在大数据量时可能较低。

应用场景

动态数据展示：当需要根据用户操作或数据更新来刷新表格内容时，清空旧数据是常见的需求。
表单重置：在表单提交后，可能需要清空表格中的临时数据。
数据过滤：在进行数据筛选或搜索时，可能需要清空当前显示的数据以展示新的结果。

注意事项

保留表头：上述方法仅清空 <tbody> 内容，保留了 <thead>，确保表格结构完整。
事件监听器：如果表格行中有绑定的事件监听器，使用 innerHTML 方法会移除这些监听器。此时推荐使用 removeChild 或 deleteRow 方法。
性能考虑：对于包含大量数据的表格，频繁操作 DOM 可能影响性能。可以考虑使用文档片段（DocumentFragment）或其他优化手段。