刪除表中除標題行以外的所有行
[英]Delete All Rows in Table except the header row
問題描述
使用 Javascript（使用 JQuery），我想刪除表中除標題行之外的所有行。
這似乎是一件簡單的事情，因為我在 StackOverFlow 上看到了很多關於這個的帖子以及提供和接受的許多解決方案。 但是，它們似乎都不適合我。 請參考我下面的代碼：
function delTable() { console.log("Delete all rows, but the header"); // Option-A // $('#TableA tbody tr').remove(); // Option-B // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header // $('#TableA tr').not(function(){ return..$(this);has('th').length; }).remove(); // Option-C $('#TableA tbody').empty(); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body onLoad="delTable();"> <table id="TableA"> <th> <tr> <td>Col A</td> <td>Col B</td> </tr> </th> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
有誰知道我做錯了什么？ 謝謝。
-卡爾提克
5 個解決方案
解決方案1
0 2020-07-06 21:09:49
您需要將th替換為thead並使用$('#TableA tbody').find("tr")如下：
function delTable() { console.log("Delete all rows, but the header"); $('#TableA tbody').find("tr").remove(); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body onLoad="delTable();"> <table id="TableA"> <thead> <tr> <td>Col A</td> <td>Col B</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
解決方案2
0 已采納 2020-07-06 21:09:51
只需將您的 th 更新為 thead，您就可以使用 go，見下文：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body onLoad="delTable()">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
JS：
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
解決方案3
0 2020-07-06 21:10:25
這對我有用。 您用<th>而不是<thead>將 header 分開，然后在 header 中使用<td>而不是<th> 。
$(document).ready(() => { $("#delete").click(() => { $("#TableA tbody tr").remove() }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="TableA"> <thead> <tr> <th>Col A</th> <th>Col B</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table> <button id="delete">delete</button>
解決方案4
0 2020-07-06 21:10:58
通過在我的 Google Chrome 中檢查您的 HTML，我可以看到行已重新排列，因此即使第一行也在<tbody>標記內。 因此整個表被刪除。 您可以通過將第一行包裝在<thead>標記中或使用不使用<tbody>標記的不同方法來解決此問題。
解決方案5
0 2022-12-17 11:42:35
那將是一個簡單的單行代碼：
function delTable() { console.log("Delete all rows, but the header"); $('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row }
給定代碼的作用是使用以下命令識別表“TableA”中不是第一行的行：$('#TableA').find("tr:not(:first)") 並隨后刪除這些行使用.remove() 命令。
刪除 HTML 表格中除帶有 JS 的標題之外的所有行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.