删除 HTML 表中的所有行

如果 <th>行比非 <th>行少得多，那么可以将所有 <th>行收集到一个字符串中，删除整个表，然后在表原来所在的位置编写 <table>thstring</table>。

编辑: 显然，“ thstring”是所有 <th>行的 html。

在 <thead>中保留 <th>行，在 <tbody>中保留其他行，然后用一个新的空行替换 <tbody>。

也就是说。

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

这是一个古老的问题，但我最近有一个类似的问题。
我写了这段代码来解决这个问题:

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]);
}

它将删除除第一行之外的所有行。

干杯！

非常粗糙，但这也有效:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

这将删除所有行:

$("#table_of_items tr").remove();

我需要删除除了第一行和@strat 发布的解决方案之外的所有行，但这会导致未捕获异常(在不存在 Node 的上下文中引用 Node)。下面这些对我很有用。

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
myTable.deleteRow(x);
}

假设您只有一个表，这样您就可以只使用类型来引用它。 如果不想删除标题:

$("tbody").children().remove()

否则:

$("table").children().remove()

希望能有帮助！

把桌子清理干净。

$("#tblbody").html("");

这在 IE 中甚至不需要为表声明 var 就可以工作，并且会删除所有行:

for(var i = 0; i < resultsTable.rows.length;)
{
resultsTable.deleteRow(i);
}

这是一个简单的代码，我只是写了解决这一点，没有删除标题行(第一个)。

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

希望对你有用。

关于 小心常见的错误的注意事项:

如果开始索引为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. deteRow 的参数是固定的
这是必需的，因为当我们删除一行时，行数会减少。
例如，当 i 到达(rows.length-1)时，或者甚至在该行已经被删除之前，您将遇到一些错误/异常(或者一个静默的错误/异常)。

2. rowCount 在 for 循环启动之前采用 因为当我们删除“ table.rows.length”时，它会不断变化，所以同样会出现一些问题，只有奇数或偶数行会被删除。< br/>

希望能帮上忙。

如果您不想删除 th，只是想删除内部的行，这是完美的工作。

var tb = document.getElementById('tableId');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}

这样吧:

当页面第一次加载时，执行以下操作:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

然后当你想清理桌子的时候:

myTable.innerHTML=myTable.oldHTML;

结果将是您的头行(s) ，如果这是所有您开始，性能是戏剧性地快于循环。

这将工作在 HTML 表中的迭代删除在本机

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

如果你可以为 tbody声明一个 ID，你可以简单地运行这个函数:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}

下面给出的代码非常好用。 它删除除标题行之外的所有行

$("#Your_Table tr>td").remove();

为 tbody 分配一个 id 或类。

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

您可以按照自己的意愿来命名 id 或类，而不一定是 #tbodyId或 .tbodyClass。

向 tbody 标记赋予某个 id。也就是说。在此之后，下面的代码行应该保留表的页眉/页脚，并删除所有行。

document.getElementById("yourID").innerHTML="";

而且，如果希望清除整个表(头/行/脚) ，那么在表级别设置 id，即。

const table = document.querySelector('table');
table.innerHTML === ' ' ? null : table.innerHTML = ' ';

上面的代码对我来说很好用。它检查表是否包含任何数据，然后清除包括标头在内的所有内容。

@ lkan 的 回答对我来说很好，但是离开第一排，改变

来自

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);
}

纯 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 节点和)子元素。有关更一般的示例，以及删除元素所有子元素的各种方法的分析，请参见 这么回答。

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>

这将删除除 <th>以外的所有行:

document.querySelectorAll("td").forEach(function (data) {
data.parentNode.remove();
});

和我面对的一样。所以我想出了一个解决方案，你不必取消表格的标题，只需删除数据。.

<script>
var tablebody =document.getElementById('myTableBody');
tablebody.innerHTML = "";


</script>

<table>
<thead>
</thead>
<tbody id='myTableBody'>
</tbody>
</table>

试试这个会正常工作..。