如何使用 Javascript 删除除 <th> 之外的 HTML 表的所有行，并且不循环遍历表中的所有行？我有一个非常大的表，我不想在循环遍历行以删除它们时冻结 UI
【问题讨论】：
removeChild只需要一个DOM元素。
标签： javascript html html-table
这将删除所有行：
$("#table_of_items tr").remove();
【讨论】：
$("tbody#id tr").remove()
document.getElementById('mytbody').innerHTML = '';
将<th> 行保留在<thead> 中，将其他行保留在<tbody> 中，然后将<tbody> 替换为新的空行。
即
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
【讨论】：
document.getElementById('tbody').innerHTML = '';
非常粗略，但这也有效：
var Table = document.getElementById("mytable");
Table.innerHTML = "";
【讨论】：
<th> 嵌套在 <thead> 中就可以了。无论如何，这可能是构建表的最语法正确的方法。
var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];bodyRef.innerHTML = '';进行了轻微修改
注意点，关于注意常见错误：
如果您的起始索引是 0（或从开始的某个索引），那么正确的代码是：
var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
table.deleteRow(tableHeaderRowCount);
}
注意事项
1. deleteRow 的参数是固定的
这是必需的，因为当我们删除一行时，行数会减少。
IE;当我达到 (rows.length - 1) 时，或者甚至在该行已被删除之前，所以你会遇到一些错误/异常（或无声的）。
2。 rowCount 在 for 循环开始之前获取
因为当我们删除“table.rows.length”时，“table.rows.length”会不断变化，所以你又遇到了一些问题，只有奇数行或偶数行才会被删除。
希望对您有所帮助。
【讨论】：
这是一个老问题，但是我最近遇到了类似的问题。
我写了这段代码来解决它：
var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;
for (var x=rowCount-1; x>0; x--) {
elmtTable.removeChild(tableRows[x]);
}
这将删除除第一行之外的所有行。
干杯！
【讨论】：
假设您只有一个表，因此您可以仅使用类型来引用它。 如果您不想删除标题：
$("tbody").children().remove()
否则：
$("table").children().remove()
希望对你有帮助！
【讨论】：
如果你可以为tbody 声明一个ID，你可以简单地运行这个函数：
var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
【讨论】：
下面的代码效果很好。 它删除除标题行之外的所有行。所以这段代码真的很t
$("#Your_Table tr>td").remove();
【讨论】：
我需要删除除@strat 发布的第一行和解决方案之外的所有行，但这会导致未捕获的异常（在不存在的上下文中引用 Node）。以下对我有用。
var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
myTable.deleteRow(x);
}
【讨论】：
这将在原生 HTML 表中进行迭代删除
document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
【讨论】：
为 tbody 标签分配一些 id。 IE。 。在此之后，以下行应保留表页眉/页脚并删除所有行。
document.getElementById("yourID").innerHTML="";
并且，如果您希望整个表格（页眉/行/页脚）消失，则将 id 设置为表格级别，即
【讨论】：
这个怎么样：
页面首次加载时，执行以下操作：
var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;
那么当你要清表的时候：
myTable.innerHTML=myTable.oldHTML;
结果将是您的标题行，如果这就是您开始的全部内容，则性能比循环快得多。
【讨论】：
如果您不想删除 th 并且只想删除里面的行，那么这是完美的。
var tb = document.getElementById('tableId');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}
【讨论】：
如果<th> 的行数远少于非<th> 的行数，则可以将所有<th> 行收集到一个字符串中，删除整个表，然后在表曾经所在的位置写入<table>thstring</table> .
编辑：显然，“thstring”是<th>s 的所有行的html。
【讨论】：
<th>s 收集为DOM 元素，清除表格的innerHTML，然后再次将<th>s 附加到它。
这可以在 IE 中使用，甚至无需为表声明 var 并且会删除所有行：
for(var i = 0; i < resultsTable.rows.length;)
{
resultsTable.deleteRow(i);
}
【讨论】：
为你的 tbody 分配一个 id 或一个类。
document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();
您可以随意命名您的 id 或班级，不一定是 #tbodyId 或 .tbodyClass。
【讨论】：
这是我刚刚编写的一个简单代码来解决这个问题，没有删除标题行（第一个）。
var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}
希望它对你有用！！。
【讨论】：
@lkan 的answer 为我工作，但是要离开第一行，请更改
来自
for (var x=rowCount-1; x>0; x--)
到
for (var x=rowCount-1; x>1; x--)
完整代码：
var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>1; x--) {
myTable.deleteRow(x);
}
【讨论】：
只需清除表体即可。
$("#tblbody").html("");
【讨论】：
纯 javascript，无循环并保留标头：
function restartTable(){
const tbody = document.getElementById("tblDetail").getElementsByTagName('tbody')[0];
tbody.innerHTML = "";
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="tblDetail" class="table table-bordered table-hover table-ligth table-sm table-striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 2</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
<td>
d
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<tr>
<td>
e
</td>
<td>
f
</td>
<td>
g
</td>
<td>
h
</td>
</tr>
</tr>
</tbody>
</table>
<button type="button" onclick="restartTable()">restart table</button>【讨论】：
假设 <table> 元素是可访问的（例如通过 id），您可以选择表体子节点，然后删除每个子节点，直到不再存在。如果您的 HTML 表格结构正确，即在 <thead> 元素中使用表格标题，则只会删除表格行。
我们使用lastElementChild 来保留父级（但不包括其后代）的所有非元素（即#text 节点和）子级。请参阅this SO answer 以获取更一般的示例，以及对删除所有元素的所有子元素的各种方法的分析。
const tableEl = document.getElementById('my-table');
const tableBodyEl = tableEl.querySelector('tbody');
// or, directly get the <tbody> element if its id is known
// const tableBodyEl = document.getElementById('table-rows');
while (tableBodyEl.lastElementChild) {
tableBodyEl.removeChild(tableBodyEl.lastElementChild);
}<table id="my-table">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
</tr>
</thead>
<tbody id="table-rows">
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<!-- comment child preserved -->
text child preserved
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
</tr>
</tbody>
</table>【讨论】：
const table = document.querySelector('table'); table.innerHTML === ' ' ？空：table.innerHTML = ' '; 上面的javascript对我来说很好。它检查表是否包含任何数据，然后清除包括表头在内的所有内容。
【讨论】：