在 JavaScript 中清除表格

1. 什麼是 HTML 中的表格
2. 在 JavaScript 中使用 replaceChild() 清除表格
3. 在 JavaScript 中使用 getElementById() 清除表格

本文展示瞭如何使用純 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 按鈕。它會清理表，看起來像這樣。

輸出：