blocks|key|1753405|text|如果您的<th>行比非<th>行少得多，那么可以将所有<th>行收集到一个字符串中，删除整个表，然后在表原来所在的位置写入<table>thstring</table>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1753406|<th>：其中，"thstring“显然是所有行的html。|1753407|entityMap^0|4|4|B|4|R|4|1P|N|0|0|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

<p>If you have far fewer <code>&lt;th&gt;</code> rows than non-<code>&lt;th&gt;</code> rows, you could collect all the <code>&lt;th&gt;</code> rows into a string, remove the entire table, and then write <code>&lt;table&gt;thstring&lt;/table&gt;</code> where the table used to be.</p>

<p>EDIT: Where, obviously, "thstring" is the html for all of the rows of <code>&lt;th&gt;</code>s.</p>


blocks|key|1753562|text|将<th>行保留在<thead>中，将其他行保留在<tbody>中，然后用新的空行替换<tbody>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1753563|即|1753564|var+new_tbody+=+document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody,+old_tbody)|code-block|syntax|javascript|1753565|entityMap^0|1|4|9|7|P|7|17|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>Keep the <code>&lt;th&gt;</code> row in a <code>&lt;thead&gt;</code> and the other rows in a <code>&lt;tbody&gt;</code> then replace the <code>&lt;tbody&gt;</code> with a new, empty one.</p>

<p>i.e.</p>

<pre><code>var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
</code></pre>


blocks|key|1753581|text|这是一个老问题，但是我最近遇到了一个类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753582|我写了这段代码来解决这个问题：|1753583|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]);
}|code-block|syntax|javascript|1753584|这将删除除第一行以外的所有行。|1753585|干杯!|1753586|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is an old question, however I recently had a similar issue.<br>
I wrote this code to solve it:</p>

<pre><code>var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x&gt;0; x--) {
   elmtTable.removeChild(tableRows[x]);
}
</code></pre>

<p>That will remove all rows, except the first.  </p>

<p>Cheers!</p>


blocks|key|1753740|text|非常粗糙，但这也是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753741|var+Table+=+document.getElementById("mytable");
Table.innerHTML+=+"";|code-block|syntax|javascript|1753742|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Very crude, but this also works:</p>

<pre><code>var Table = document.getElementById("mytable");
Table.innerHTML = "";
</code></pre>


blocks|key|1967148|text|这将删除所有行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967149|$("#table_of_items+tr").remove();+|code-block|syntax|javascript|1967150|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this will remove all the rows:</p>

<pre><code>$("#table_of_items tr").remove(); 
</code></pre>


blocks|key|1967167|text|我需要删除除@strat发布的第一行和解决方案之外的所有行，但这导致了未捕获的异常(在不存在的上下文中引用Node+)。下面的方法对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967168|var+myTable+=+document.getElementById("myTable");
var+rowCount+=+myTable.rows.length;
for+(var+x=rowCount-1;+x>0;+x--)+{
+++myTable.deleteRow(x);
}|code-block|syntax|javascript|1967169|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I needed to delete all rows except the first and solution posted by @strat but that resulted in uncaught exception (referencing Node in context where it does not exist). The following worked for me. </p>

<pre><code>var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x&gt;0; x--) {
   myTable.deleteRow(x);
}
</code></pre>


blocks|key|1967190|text|假设你只有一个表，所以你可以只用类型来引用它。如果您不想删除头部，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967191|$("tbody").children().remove()|code-block|syntax|javascript|1967192|否则：|1967193|$("table").children().remove()|1967194|希望它能帮上忙！|1967195|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Assuming you have just one table so you can reference it with just the type.
If you don't want to delete the headers:</p>

<pre><code>$("tbody").children().remove()
</code></pre>

<p>otherwise:</p>

<pre><code>$("table").children().remove()
</code></pre>

<p>hope it helps!</p>


blocks|key|1753801|text|只要清空表体即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753802|$("#tblbody").html("");|code-block|syntax|javascript|1753803|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just Clear the table body.</p>

<pre><code>$("#tblbody").html("");
</code></pre>


blocks|key|1753808|text|这在IE中是有效的，甚至不需要为表声明一个var，并且将删除所有行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753809|for(var+i+=+0;+i+<+resultsTable.rows.length;)
{+++
+++resultsTable.deleteRow(i);
}|code-block|syntax|javascript|1753810|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works in IE without even having to declare a var for the table and will delete all rows:</p>

<pre><code>for(var i = 0; i &lt; resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}
</code></pre>


blocks|key|1967221|text|这是我刚刚编写的一段简单代码，用来解决这个问题，而不需要删除标题行(第一行)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967222|var+Tbl+=+document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}|code-block|syntax|javascript|1967223|希望它对你有用！！.|1967224|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>this is a simple code I just wrote to solve this, without removing the header row (first one).</p>

<pre><code>var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length&gt;2){Tbl.removeChild(Tbl.lastChild);}
</code></pre>

<p>Hope it works for you!!.</p>


blocks|key|1967226|text|如果您不想删除th，而只想删除其中的行，则此方法可以完美地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1967227|var+tb+=+document.getElementById('tableId');
++while(tb.rows.length+>+1)+{
++tb.deleteRow(1);
}|code-block|syntax|javascript|1967228|entityMap^0|7|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you do not want to remove <code>th</code> and just want to remove the rows inside, this is working perfectly.</p>

<pre><code>var tb = document.getElementById('tableId');
  while(tb.rows.length &gt; 1) {
  tb.deleteRow(1);
}
</code></pre>


blocks|key|1967230|text|这样如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967231|当页面第一次加载时，执行以下操作：|1967232|var+myTable+=+document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;|code-block|syntax|javascript|1967233|然后，当您要清空该表时：|1967234|myTable.innerHTML=myTable.oldHTML;|1967235|结果将是您的标题行(S)如果这就是您开始的全部，性能比循环快得多。|1967236|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>How about this:</p>

<p>When the page first loads, do this:</p>

<pre><code>var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;
</code></pre>

<p>Then when you want to clear the table:</p>

<pre><code>myTable.innerHTML=myTable.oldHTML;
</code></pre>

<p>The result will be your header row(s) if that's all you started with, the performance is dramatically faster than looping.</p>


blocks|key|1753828|text|这将在原生HTML表中进行迭代删除|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753829|document.querySelectorAll("table+tbody+tr").forEach(function(e){e.remove()})|code-block|syntax|javascript|1753830|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this would work iteration deletetion in HTML table in native</p>

<pre><code>document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
</code></pre>


blocks|key|1753834|text|如果您可以为tbody声明一个ID，则可以简单地运行此函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1753835|var+node+=+document.getElementById("tablebody");
while+(node.hasChildNodes())+{
++node.removeChild(node.lastChild);
}|code-block|syntax|javascript|1753836|entityMap^0|6|5|F|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>If you can declare an <code>ID</code> for <code>tbody</code> you can simply run this function:</p>

<pre><code>var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}
</code></pre>


blocks|key|1753844|text|下面的代码运行得很好。它删除除标题行之外的所有行。所以这段代码真的没有|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753845|$("#Your_Table+tr>td").remove();|code-block|syntax|javascript|1753846|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>the give below code works great.
It removes all rows except header row. So this code really t </p>

<pre><code>$("#Your_Table tr&gt;td").remove();
</code></pre>


blocks|key|1753924|text|为tbody分配一个id或一个类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753925|document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();|code-block|syntax|javascript|1753926|您可以随意命名您的id或类，不一定是#tbodyId或.tbodyClass。|offset|length|style|CODE|1753927|entityMap^0|0|0|I|8|R|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>Assign an id or a class for your tbody. </p>

<pre><code>document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();
</code></pre>

<p>You can name your id or class how you want, not necessarily <code>#tbodyId</code> or <code>.tbodyClass</code>.</p>


blocks|key|1753949|text|正在将一些id发送到tbody标签。即。在此之后，下面的行应保留表头/表尾并删除所有行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753950|document.getElementById("yourID").innerHTML="";|code-block|syntax|javascript|1753951|而且，如果您希望清除整个表(页眉/行/页脚)，则在表级设置id，即|1753952|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Assing some id to tbody tag. i.e. . After this, the following line should retain the table header/footer and remove all the rows. </p>

<pre><code>document.getElementById("yourID").innerHTML="";
</code></pre>

<p>And, if you want the entire table (header/rows/footer) to wipe out, then set the id at table level i.e. </p>


blocks|key|1753992|text|const+table+=+document.querySelector('table')；table.innerHTML+===‘’？空:+table.innerHTML+=‘'；上面的javascript对我来说工作得很好。它检查表是否包含任何数据，然后清除所有内容，包括标题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1753993|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>const table = document.querySelector('table');
table.innerHTML === ' ' ? null : table.innerHTML = ' ';
the above javascript worked fine for me. It checks to see if the table contains any data and then clears everything including the header.</p>


blocks|key|1753995|text|@lkan的answer适用于我，但是离开了第一行，更改|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1753996|从…|1753997|for+(var+x=rowCount-1;+x>0;+x--)|code-block|syntax|javascript|1753998|至|1753999|for+(var+x=rowCount-1;+x>1;+x--)|1754000|完整代码：|1754001|var+myTable+=+document.getElementById("myTable");
var+rowCount+=+myTable.rows.length;
for+(var+x=rowCount-1;+x>1;+x--)+{
+++myTable.deleteRow(x);
}|1754002|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/19865006/2873538^0|6|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>@lkan's <a href="https://stackoverflow.com/a/19865006/2873538">answer</a> worked for me, however to leave the first row, change</p>
<p>from</p>
<pre><code>for (var x=rowCount-1; x&gt;0; x--)
</code></pre>
<p>to</p>
<pre class="lang-js prettyprint-override"><code>for (var x=rowCount-1; x&gt;1; x--)
</code></pre>
<p>Full code:</p>
<pre class="lang-js prettyprint-override"><code>var myTable = document.getElementById(&quot;myTable&quot;);
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x&gt;1; x--) {
   myTable.deleteRow(x);
}
</code></pre>


blocks|key|1967433|text|纯javascript，无循环，保留头部：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1967434|​|1967435|function+restartTable(){

const+tbody+=+document.getElementById("tblDetail").getElementsByTagName('tbody')[0];
++++tbody.innerHTML+=+"";

}|code-block|syntax|javascript|1967436|<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>|1967437|1967438|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Pure javascript, no loops and preserving headers:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function restartTable(){

const tbody = document.getElementById("tblDetail").getElementsByTagName('tbody')[0];
    tbody.innerHTML = "";

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;

 &lt;table id="tblDetail" class="table table-bordered table-hover table-ligth table-sm table-striped"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Header 1&lt;/th&gt;
                    &lt;th&gt;Header 2&lt;/th&gt;
                    &lt;th&gt;Header 2&lt;/th&gt;
                    &lt;th&gt;Header 2&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  a
                &lt;/td&gt;
                &lt;td&gt;
                  b
                &lt;/td&gt;
                &lt;td&gt;
                  c
                &lt;/td&gt;
                &lt;td&gt;
                  d
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  1
                &lt;/td&gt;
                &lt;td&gt;
                  2
                &lt;/td&gt;
                &lt;td&gt;
                  3
                &lt;/td&gt;
                &lt;td&gt;
                  4
                &lt;/td&gt;
                &lt;tr&gt;
                &lt;td&gt;
                  e
                &lt;/td&gt;
                &lt;td&gt;
                  f
                &lt;/td&gt;
                &lt;td&gt;
                  g
                &lt;/td&gt;
                &lt;td&gt;
                  h
                &lt;/td&gt;
               
              &lt;/tr&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
        
                
        &lt;button type="button" onclick="restartTable()"&gt;restart table&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1754034|text|假设<table>元素是可访问的(例如，通过id)，您可以选择表体子节点，然后删除每个子节点，直到没有剩余的子节点。如果您已经正确地构造了您的HTML表，即在<thead>元素中具有表头，那么这将只删除表行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1754035|我们使用lastElementChild来保存父元素(但不是它们的后代)的所有非元素(即#text节点和)子节点。有关更一般的示例以及删除元素的所有子元素的各种方法的分析，请参阅this+SO+answer。|1754036|​|1754037|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);
}|code-block|syntax|javascript|1754038|<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>
++++
++++text+child+preserved
++++<tr>
++++++<td>Banana</td>
++++++<td>Yellow</td>
++++</tr>
++++<tr>
++++++<td>Plum</td>
++++++<td>Purple</td>
++++</tr>
++</tbody>
</table>|1754039|1754040|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/3955238/12109043^0|2|7|27|7|0|4|G|2H|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>Assuming the <code>&lt;table&gt;</code> element is accessible (e.g. by id), you can select the table body child node and then remove each child until no more remain. If you have structured your HTML table properly, namely with table headers in the <code>&lt;thead&gt;</code> element, this will only remove the table rows.</p>
<p>We use <code>lastElementChild</code> to preserve all non-element (namely #text nodes and  ) children of the parent (but not their descendants). See <a href="https://stackoverflow.com/a/3955238/12109043">this SO answer</a> for a more general example, as well as an analysis of various methods to remove all of an element's children.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const tableEl = document.getElementById('my-table');

const tableBodyEl = tableEl.querySelector('tbody');

// or, directly get the &lt;tbody&gt; element if its id is known
// const tableBodyEl = document.getElementById('table-rows');

while (tableBodyEl.lastElementChild) {
  tableBodyEl.removeChild(tableBodyEl.lastElementChild);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="my-table"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Color&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id="table-rows"&gt;
    &lt;tr&gt;
      &lt;td&gt;Apple&lt;/td&gt;
      &lt;td&gt;Red&lt;/td&gt;
    &lt;/tr&gt;
    &lt;!-- comment child preserved --&gt;
    text child preserved
    &lt;tr&gt;
      &lt;td&gt;Banana&lt;/td&gt;
      &lt;td&gt;Yellow&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Plum&lt;/td&gt;
      &lt;td&gt;Purple&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>How can I delete all rows of an HTML table except the <code>&lt;th&gt;</code>'s using Javascript, and without looping through all the rows in the table? I have a very huge table and I don't want to freeze the UI while I'm looping through the rows to delete them</p>


Delete all rows in an HTML table

如何使用Javascript删除一个超文本标记语言表格中除<th>之外的所有行，并且不遍历表中的所有行?我有一个非常大的表，我不想在循环行以删除它们时冻结UI

问删除HTML表中的所有行
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除HTML表中的所有行EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除HTML表中的所有行
EN