使用 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>有谁知道我做错了什么？谢谢。
4 回答
DIEA
TA贡献1820条经验 获得超2个赞
只需将您的 th 更新为 thead 就可以了，请参见下文：
HTML：
<!DOCTYPE html>
<html>
<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();
}
工作小提琴： https ://jsfiddle.net/pvfkxdby/1/
梦里花落0921
TA贡献1772条经验 获得超6个赞
这对我有用。<th>你用而不是分开你的标题，<thead>然后你<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>
慕少森
TA贡献2019条经验 获得超9个赞
通过在我的 Google Chrome 中检查您的 HTML，我可以看到行已重新排列，因此即使第一行也在<tbody>标签内。因此整个表被删除。您可以简单地通过将第一行包装在<thead>标签中或使用不使用<tbody>标签的不同方法来解决此问题。
手掌心
TA贡献1942条经验 获得超3个赞
您需要替换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>
添加回答
举报
0/150
提交
取消