when I try to insert a row to empty <tbody> of my table, it added row to <thead> that is not empty, but not to <tbody>.
Example:
<!DOCTYPE html>
<html>
<body>
<table id="myTable">
<thead style="background-color: red;">
<tr>
<td>A</td>
<td>B</td>
</tr>
</thead>
<tbody></tbody>
</table>
<br>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>
EDIT
Solution: <tbody><tr></tr></tbody>, but it's not very clear...
CodePudding user response：
You should add an id to your <tbody> which i did here and save that in tableBody variable like this.
var tableBody = document.getElementById("tbody");.
You were saving the whole table in table variable and that's why it was adding a row in wrong element.
<!DOCTYPE html>
<html>
<body>
<table id="myTable">
<thead style="background-color: red;">
<tr>
<td>A</td>
<td>B</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<br>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var tableBody = document.getElementById("tbody");
var row = tableBody.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>CodePudding user response：
A table has three parts of: thead, tbody and tfoot. There is no reason your code to insert a new row to tbody, as you want. if you want to add a row in tbody you need to mention it. In your coed make a little change:
function myFunction() {
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}