cuando trato de insertar una fila para vaciar <tbody> de mi tabla, agregó una fila a <thead> que no está vacía, pero no a <tbody> .
Ejemplo:
<!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>EDITAR
Solución: <tbody><tr></tr></tbody> , pero no está muy claro...
Una mesa tiene tres partes de: cabeza , cuerpo y pie . No hay motivo para que su código inserte una nueva fila en tbody, como desee. si desea agregar una fila en tbody, debe mencionarlo. En tu coed haz un pequeño cambio:
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"; }Puede usar var table = document.querySelector("#myTable tbody"); si desea agregar una fila en tbody, debe mencionar la ubicación exacta como lo hice con 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>