删除 HTML 表中的所有行

Question

如何删除 HTML 表的所有行，除了<th>使用 Javascript 并且不循环遍历表中的所有行？ 我有一个非常大的表，我不想在循环遍历行以删除它们时冻结 UI

Answer 1

这将删除所有行：

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

Answer 2

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

IE

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

Answer 3

非常粗糙，但这也有效：

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

Answer 4

注意点，注意常见错误：

如果您的起始索引为 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”会不断变化，所以你又遇到了一些问题，只有奇数行或偶数行才会被删除。

希望有帮助。

Answer 5

这是一个老问题，但是我最近遇到了类似的问题。
我写了这段代码来解决它：

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

这将删除所有行，除了第一行。

干杯!

Answer 6

假设您只有一个表，因此您可以仅使用类型来引用它。 如果您不想删除标题：

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

否则：

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

希望能帮助到你！

Answer 7

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

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

Answer 8

下面给出的代码效果很好。 它删除除标题行之外的所有行。 所以这段代码真的

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

Answer 9

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

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

Answer 10

这将在本机的 HTML 表中进行迭代删除

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

Answer 11

为 tbody 标签分配一些 id。 IE 。 在此之后，以下行应保留表格页眉/页脚并删除所有行。

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

而且，如果您希望整个表格（页眉/行/页脚）消失，则在表格级别设置 id，即

Answer 12

这个怎么样：

首次加载页面时，请执行以下操作：

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

然后当你想清除表时：

myTable.innerHTML=myTable.oldHTML;

结果将是你的标题行，如果这就是你开始的全部，性能比循环快得多。

Answer 13

如果您不想删除th并且只想删除里面的行，那么这是完美的。

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

Answer 14

这在 IE 中有效，甚至无需为表声明一个 var 并将删除所有行：

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

Answer 15

为您的 tbody 分配一个 id 或一个类。

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

您可以根据需要命名您的 id 或类，不一定是#tbodyId或.tbodyClass 。

Answer 16

如果您的<th>行比非<th>行少得多，您可以将所有<th>行收集到一个字符串中，删除整个表，然后在表使用的位置写入<table>thstring</table>成为。

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

Answer 17

这是我刚刚编写的一个简单代码来解决这个问题，没有删除标题行（第一个）。

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

希望这对你有用！！。

Answer 18

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

Answer 19

纯 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>

Answer 20

只需清除表体。

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

Answer 21

假设<table>元素是可访问的（例如通过 id），您可以选择表格主体子节点，然后删除每个子节点，直到不再存在。 如果您的 HTML 表格结构正确，即在<thead>元素中使用表格标题，则只会删除表格行。

我们使用lastElementChild来保留所有非元素（即 #text 节点和 ）父级（但不包括其后代）的子级。 请参阅此 SO 答案以获取更一般的示例，以及对删除所有元素的所有子元素的各种方法的分析。

 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>

Answer 22

这将删除除<th>之外的所有行：

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

Answer 23

我面临同样的事情。 所以我想出了一个解决方案，你不必取消设置表的标题只删除数据..

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

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

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

Answer 24

const table = document.querySelector('table'); table.innerHTML === ' ' ? 空：table.innerHTML = ' '; 上面的javascript对我来说很好。 它检查表是否包含任何数据，然后清除包括标题在内的所有内容。