在 JavaScript 中清除表格
本文展示瞭如何使用純 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
按鈕。它會清理表,看起來像這樣。
輸出:
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