在 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