javascript - Delete all rows in an HTML table except for header with JS

So I am having trouble deleting all of the data in an HTML table with js WITHOUT deleting the header. Here is my 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>

And here is 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];
        }
    }
}

I have omitted A LOT of array entries because they contained almost the FULL instruction set of thee z80 microprocessor. What this code does (basically) is it gets an input from the user and if the array table contains that input then it gets the corresponding values from bin, hex, assembly and description and assigns each a column in the table out, then adds a row with the for the data. However, I cannot seem to find a way to delete all of the rows in tbody before another set of values are appended to the table without deleting thead. I have searched around on the web and found several solutions, none of which worked. They either deleted the thead or caused some kind of error (I'll give examples if you ask). I am using Google Chrome version 63.0.3239.132 web browser to run my code. As you may be able to see I am quite new to js and HTML Any ideas what I have done wrong?

~Jachdich

So I am having trouble deleting all of the data in an HTML table with js WITHOUT deleting the header. Here is my 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>

And here is 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];
        }
    }
}

~Jachdich

Share asked Jan 26, 2018 at 19:58 Jachdich 7921 gold badge9 silver badges25 bronze badges

2 document.querySelector('#out tbody').remove() – connexo Commented Jan 26, 2018 at 20:02

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

First You have to close your <table> tag </table>

This is how you can clear your table.

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

<script src="https://ajax.googleapis./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>

Assuming you want to keep the tbody element intact instead of just removing it and all its children at once:

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

From a semantic perspective, it would make the removal of rows much easier if you added them to the <tbody> element instead of the <thead> element. This way, you could target the rows within the body and remove them whilst preserving your <thead> (sibling node to ):

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/en-US/docs/Web/HTML/Element/tbody#examples

with jQuery you can do it simply in a single line of code.

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

it will remove all rows in a table except the header.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Delete all rows in an HTML table except for header with JS - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)