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...
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";
}
You can use var table = document.querySelector("#myTable tbody");
if you want to add a row in tbody you need to mention the exact location like i did with document.querySelector("#myTable tbody");.
<!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.querySelector("#myTable tbody");
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>