删除 HTML 表格中的所有行

Posted 2023-03-05

【中文标题】删除 HTML 表格中的所有行

【英文标题】：Delete all rows in an HTML table

【发布时间】：2011-11-08 10:43:27

【问题描述】：

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

【问题讨论】：

必须有一个循环，没有“delete-multiple-elements”命令，方法removeChild只需要一个DOM元素。

@SLaks 假设他的意思是包含标题行的行

【参考方案1】：

这将删除所有行：

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

【讨论】：

如果不想删除表头：$("#table_of_items tbody tr").remove();

很好的简单答案。我在 CoffeeScript 中使用过 - 我喜欢单行解决方案 $("tbody#id tr").remove()

我认为这比接受的答案更好，尽管这取决于您是否要使用 JQuery。但不知何故 .remove 在 Chrome 上不起作用。

TTT，使用 标签创建表头。然后 $("#table_of_items tr").remove();对你来说很好，因为它只删除 标签。 错误的答案 - 那不是 JavaScript - 那是 JQuery（不是 OP 要求的）。我认为这 只工作 1 次 - 如果你尝试这样做 second 时间（例如在添加更多行之后）我看到错误“Uncaught TypeError: Cannot read null 的属性（读取 'remove'）” - 所以对于任何寻找 JavaScript 解决方案的人来说（就像 OP 要求的那样）： .remove() 可能是错误的想法？ （至少没有额外的步骤来放回新的东西，以后可以再次删除）。设置为 '' 比 .remove() 更安全：例如document.getElementById('mytbody').innerHTML = '';

【参考方案2】：

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

即

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

【讨论】：

很容易成为最有效的解决方案，当然前提是允许 JavaScript 开发人员修改 HTML。

请注意，如果您要使用 innerHTML 属性替换 tbody，它在 IE 中将不起作用，但有一个解决方法。

@Eonasdan — 这有点主观。如果有这个问题的人想用其中一个来解决这个问题，那里有很多库（我个人的偏好是这些天使用 YUI 3）。无论您希望包含哪一大块第三方代码，这些原则都是相同的。

死灵法...怎么了：document.getElementById('tbody').innerHTML = '';

@Trees4theForest 这对我来说很好用。可能在 OP 的时候是不可能的。

【参考方案3】：

非常粗略，但这也有效：

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

【讨论】：

不幸的是，这并没有按照 OP 的要求保留标题

。

如果他们将他们的标题 <th> 嵌套在 <thead> 中就可以了。无论如何，这可能是构建表的最语法正确的方法。

效果很好。我认为这只适合像我这样在 JQuery 中创建表头、行、单元格、tbody 的人。

我只清理了正文，对此var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];bodyRef.innerHTML = '';进行了轻微修改

这个答案解决方案对我不起作用（它删除了 thead 和 tbody）。我失去了我的标题。但是@azyth 的解决方案（在评论中）效果很好。编辑错字。

【参考方案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”会不断变化，所以你又遇到了一些问题，只有奇数行或偶数行才会被删除。

希望对您有所帮助。

【参考方案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]);

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

干杯！

【讨论】：

更短（更快）：var rowCount = myTable.rows.length; while(--rowCount) myTable.deleteRow(rowCount);

上面注释中的代码没有删除第一行

【参考方案6】：

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

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

否则：

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

希望对你有帮助！

【参考方案7】：

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

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

【参考方案8】：

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

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

【讨论】：

等等，这是jQuery的答案，原来的问题并没有专门针对jQuery解决方案！

【参考方案9】：

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

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

【参考方案10】：

这将在原生 HTML 表中进行迭代删除

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

【参考方案11】：

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

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

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

【参考方案12】：

这个怎么样：

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

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

那么当你要清表的时候：

myTable.innerHTML=myTable.oldHTML;

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

【讨论】：

非常优雅的解决方案

@revelt 确实。

【参考方案13】：

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

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

【参考方案14】：

如果<th> 的行数远少于非<th> 的行数，则可以将所有<th> 行收集到一个字符串中，删除整个表，然后在表曾经所在的位置写入<table>thstring</table> .

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

【讨论】：

而是将<th>s 收集为DOM 元素，清除表格的innerHTML，然后再次将<th>s 附加到它。

请注意，如果您要使用 innerHTML 属性替换 clear tbody，它在 IE 中将不起作用，但有一个解决方法。

【参考方案15】：

这可以在 IE 中使用，甚至无需为表声明 var 并且会删除所有行：

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

【参考方案16】：

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

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

您可以随意命名您的 id 或班级，不一定是 #tbodyId 或 .tbodyClass。

【参考方案17】：

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

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

希望它对你有用！！。

【参考方案18】：

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

【参考方案19】：

只需清除表体即可。

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

【讨论】：

html() 实际上是一个jQuery方法。

【参考方案20】：

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

【参考方案21】：

假设 <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>

【参考方案22】：

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