javascript - 使用 JS 删除 HTML 表格中除标题之外的所有行

标签 javascript html html-table

所以我在使用 js 删除 HTML 表中的所有数据而不删除 header 时遇到问题。这是我的 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 包含该输入,则它从 binhex 获取相应的值assembledescription 并在表 out 中为每个列分配一列,然后为数据添加一行。但是,在将另一组值附加到表中而不删除 thead 之前,我似乎找不到一种方法来删除 tbody 中的所有行。我在网上搜索了一些解决方案,但没有一个有效。他们要么删除了thead,要么导致了某种错误(如果你问的话我会给出例子)。我正在使用 Google Chrome 版本 63.0.3239.132 网络浏览器来运行我的代码。 正如你可能看到的,我对 js 和 HTML 很陌生 有什么想法我做错了什么吗?

~贾赫迪奇

最佳答案

首先你必须关闭你的<table>标签</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>

关于javascript - 使用 JS 删除 HTML 表格中除标题之外的所有行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48468672/

相关文章:

javascript - 如何禁用在 v-time-picker 小部件中选择分钟?

javascript - 输入字段上的 Angular 条件只读/禁用

jquery - Bootstrap 折叠菜单滚动问题

javascript - 如何压缩 Yup "when"验证

javascript - Javascript 中数组与对象的实例化。什么时候数组是对象,什么时候获取数组的方法?

javascript - 计算数组中两个输入值之间的值的数量

php - 获取当前登录的 TYPO3 用户 (fe-user)

html - 表格和表格标题的 td 宽度百分比行为不正确?

html-table - Vue - 如何将表列绑定(bind)到数据对象?

javascript - 使用带有 innerHTML 的 javascript 更改表数据