迹忆客 专注技术分享

本文展示了如何使用纯 JavaScript 清除 HTML 表格。

什么是 HTML 中的表格

表是行和列（表数据）的结构化数据集。它看起来更像电子表格。

在 HTML 中，使用表格，你可以在单元格的行和列中组织数据，例如图像、文本、链接等。

由于 HTML 表格标签使创建和设计变得更容易，在 Web 上使用表格最近变得越来越流行。

HTML 表格由 <table> 标记定义。这是最重要的标签，它是表格的主要容器。

表格的每一行都由 <tr> 标签定义。 <th> 标签定义了表的头部。

表格标题默认为粗体并居中。单元格是用 <td> 标记定义的。

在 JavaScript 中使用 replaceChild() 清除表格

Node 元素的 replaceChild() 方法替换指定（父）节点内的子节点。这个函数有两个参数，newChild 和 oldChild。

语法：

replaceChild(newChild, oldChild);

newChild 是用于替换 oldChild 的新节点。如果新节点已存在于 DOM 中的其他位置，则首先将其从该位置移除。

oldChild 是要替换的子元素。你可以在 replaceChild() 的文档中找到更多信息。

因此，假设我们有用户以及电子邮件和姓名。我们想找出电子邮件以 gmail.com 结尾的用户。

我们可以创建搜索输入，我们可以在其中输入搜索查询。

<button onclick="clearTable()">Clear table</button>

<table id="userTable">
<tbody id="tableBody">

  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Email</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>alfreds@example.com</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>snabbkop@gmail.com</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@dummy.com</td>
  </tr>
  <tr>
    <td>Magazzini</td>
    <td>magazzini@gmail.com</td>
  </tr>
  </tbody>
</table>

现在，让我们使用 getElementById() 提取表格主体。

function replaceTable() {
  const old_tbody = document.getElementById('tableBody')
  const new_tbody = document.createElement('tbody');
  old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
}

在 replaceTable 函数中，我们使用 getElementById 来查找 DOM 中存在的表体。下一步是创建新的空 tbody 元素。

用新的 tbody 节点替换旧的 tbody 节点。

现在让我们运行上面的代码并点击 Clear table 按钮。它会清理表，看起来像这样。

在 JavaScript 中使用 getElementById() 清除表格

getElementById() 是 JavaScript 提供的集成文档方法，它返回 id 与指定 id 匹配的元素对象。

语法：

getElementById($id)

$id 是一个强制参数，它指定必须匹配的 HTML 属性的 id。如果找到对应的元素，则返回对应的 DOM 元素对象；否则，它返回 null。

现在，让我们使用 getElementById() 提取表。

function clearTable() {
  console.log('clearing table')
  var Table = document.getElementById('userTable');
  Table.innerHTML = '';
}

在 clearTable 函数中，我们使用 getElementById 来查找 DOM 中存在的表。找到表节点后，删除带有空字符串的 innerHTML。

现在让我们运行上面的代码并点击 Clear table 按钮。它会清理表，看起来像这样。