Question

所以我在使用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微处理器的FULL指令集。此代码（基本上）的作用是从用户获取输入，如果数组table包含该输入，则它从bin，hex，{{1}获取相应的值}和assembly并为表description中的每一列分配一个列，然后为数据添加一行。但是，在将另一组值附加到表而不删除out之前，我似乎无法找到删除tbody中所有行的方法。我在网上搜索并找到了几个解决方案，但没有一个有效。他们要么删除thead，要么导致某种错误（如果你问的话，我会给出例子）。我使用Google Chrome 63.0.3239.132网络浏览器来运行我的代码。你可能会看到我对js和HTML很新我做错了什么想法？

〜Jachdich

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

Answer 2

假设您想要保持tbody元素的完整性，而不是立即删除它及其所有子元素：

WAIT_FOR_CPU

Answer 3

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

<thead>

body.removeChild（rowsWithinBody）

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

删除HTML表中除JS头之外的所有行

3 个答案: