删除 HTML 表格中的所有行，除了带有 JS 的标题答案

【问题标题】：Delete all rows in an HTML table except for header with JS删除 HTML 表格中的所有行，除了带有 JS 的标题
【发布时间】：2018-07-06 05:23:55
【问题描述】：

所以我无法删除带有 js 的 HTML 表中的所有数据而不删除标题。这是我的 HTML：

<html>
<title>Z80 Opcodes</title>
<body>
<input type="text" id = "input" value = "">
<button onClick = "hex()">Hex</button>
<button onClick = "bin()">Bin</button>
<button onClick = "assem()">Assembly</button>
<button onClick = "find()">Find</button>
<table id = "out" style="width:100%">
<thead>
<th align="left">Binary</th>
<th align="left">Hex</th>
<th align="left">Assembly</th>
<th align="left">Description</th>
</thead>
<tbody id="tb">
</tbody>
<script src = "js/script.js">
</script>
</body>
</html>

这里是 script.js：

var id = document.getElementById("out");
var ab = "";
var row;
var table = ['0000000000nopno operation', '0000000101ld (bc), **loads ** into BC'];
var bin = ['00000000', '00000001'];
var hex = ['00', '01'];
var assembly = ['nop', 'ld (bc), **'];
var description = ['no operation', 'loads ** into BC'];
l = table.length;
function find() {
    row = id.insertRow(0);
    for (i=0;i <=l-1;i++) {
        ab = table[i];
        if (ab.includes(document.getElementById("input").value)) {
            row = id.insertRow(-1);
            cell1 = row.insertCell(0);
            cell2 = row.insertCell(1);
            cell3 = row.insertCell(2);
            cell4 = row.insertCell(3);
            cell1.innerHTML = bin[i];
            cell2.innerHTML = hex[i];
            cell3.innerHTML = assembly[i];
            cell4.innerHTML = description[i];
        }
    }
}

我省略了很多数组条目，因为它们几乎包含了 z80 微处理器的完整指令集。这段代码的作用（基本上）是从用户那里获取输入，如果数组table 包含该输入，那么它会从bin、hex、assembly 和description 中获取相应的值并分配每个表out 中的一列，然后为数据添加一行。但是，在将另一组值附加到表而不删除thead 之前，我似乎找不到删除tbody 中所有行的方法。我在网上四处搜索并找到了几种解决方案，但都没有奏效。他们要么删除了thead，要么导致了某种错误（如果你问我会举例）。我正在使用 Google Chrome 版本 63.0.3239.132 网络浏览器来运行我的代码。你可能会看到我对 js 和 HTML 很陌生任何想法我做错了什么？

~贾奇迪奇

【问题讨论】：

document.querySelector('#out tbody').remove()

标签： javascript html html-table

【解决方案1】：

首先你必须关闭你的<table>标签</table>

这就是你清理桌子的方法。

$('#remove').on('click', ()=>{
   $('#tb').empty()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "out" style="width:100%">
    <thead>
          <th align="left">Binary</th>
          <th align="left">Hex</th>
          <th align="left">Assembly</th>
          <th align="left">Description</th>
    </thead>
    <tbody id="tb">
        <tr>
            <th>01010101</th>
            <th>1231:sdf:sdf42</th>
            <th>213123</th>
            <th>description</th>
        </tr>
    </tbody>
</table>   

<button id="remove">
  clear
</button>

【讨论】：

我有一点格式错误，</table> 标签在我的代码中，我一定是不小心在问题中删除了它
希望这个sn-p可以帮到你:)

【解决方案2】：

假设您想保持 tbody 元素完整，而不是一次删除它及其所有子元素：

// get a reference to the tbody element
var tb = document.querySelector('#out tbody');

// while tb has children, remove the first one
while (tb.childNodes.length) {
  tb.removeChild(tb.childNodes[0]);
}
// tb is now empty

【讨论】：

【解决方案3】：

从语义的角度来看，如果将行添加到 <tbody> 元素而不是 <thead> 元素中，那么删除行会更容易。这样，您可以定位正文中的行并删除它们，同时保留您的 <thead>（与的兄弟节点）：

var body = document.querySelector('tbody');
while (body.firstChild) {
  // This will remove all children within tbody which in your case are <tr> elements
  body.removeChild(body.firstChild);
}

body.removeChild(rowsWithinBody)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#examples

【讨论】：

querySelector 返回匹配选择器的第一个元素，因此这只会删除第一行

【解决方案4】：

使用 jQuery，您只需一行代码即可完成。

$("#table_id tbody tr").remove();

它将删除表中除表头之外的所有行。

【讨论】：