极客教程JavaScript 如何删除表中的所有行
给定一个包含HTML表格的HTML文档，任务是从HTML表格中删除所有行。删除所有行与删除几行不同。这可以通过使用JavaScript来完成。
这里有两种方法来删除表中的所有行：
- remove()方法
- detach()方法
方法1：使用remove()方法
JQuery中的remove()方法用于删除所有选定的元素，包括所有文本。该方法还删除选定元素的数据和所有事件。
- 首先，为表格设置ID或唯一类。
- 选择表格元素，并使用 remove() 方法删除所有表格行。
示例： 在这个示例中，通过使用 remove()方法 删除了所有行。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id="row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
<tr>
<td>Geek_4</td>
<td>GeeksForGeeks</td>
<th>Geek_id_4</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN">
</p>
<script>
function Geeks() {
("#table").remove();
("#GFG_DOWN").text
("All rows of the table are deleted.");
}
</script>
</body>
</html>
输出：
方法2：使用detach()方法
detach方法用于删除所选择的元素，包括所有文本和子节点，仅保留数据和事件。使用此技术删除的元素保存在副本中，以便在需要时可以重新插入。
示例： 在此示例中，使用 detach()方法 删除所有行。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr id="thead">
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id="row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
<tr>
<td>Geek_4</td>
<td>GeeksForGeeks</td>
<th>Geek_id_4</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
function Geeks() {
('#table').detach();
("#GFG_DOWN").text
("All rows of the table are deleted.");
}
</script>
</body>
</html>
输出：
