在 JavaScript 中清除表格

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 什么是 HTML 中的表格
  2. 在 JavaScript 中使用 replaceChild() 清除表格
  3. 在 JavaScript 中使用 getElementById() 清除表格
在 JavaScript 中清除表格

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

什么是 HTML 中的表格

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

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

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

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

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

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

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

Node 元素的 replaceChild() 方法替换指定(父)节点内的子节点。这个函数有两个参数,newChildoldChild

语法:

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 中使用 replacechild 清除表格

在 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 按钮。它会清理表,看起来像这样。

输出:

在 javascript 中使用 getelementbyid 清除表格

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Table