从ID删除表格内容

Question

I have a function to generate rows from Javascript, and a function to clear it, but when delete I can't use the function to create again because it removes all. I need to remove only the content and don't find how.

 function myFunction() { var stock = new Array() stock[0] = new Array("Cars", "1", "2", "3", "4", "5") stock[1] = new Array("Veggies", "11", "22", "33", "44", "55") stock[2] = new Array("Colors", "111", "222", "333", "444", "555") stock[3] = new Array("Numbers", "1111", "2222", "3333", "4444", "55555") stock[4] = new Array("Requests", "28.625", "68.625", "22", "22", "22") var table = document.getElementById("tableBody"); for (i = 0; i < stock.length; i++) { var row = table.insertRow(i); for (j = 0; j < stock[i].length; j++) { var cell = row.insertCell(j); cell.innerHTML = stock[i][j]; } } } function removeTable(id) { var tbl = document.getElementById(id); if (tbl) tbl.parentElement.removeChild(tbl); } 

 table, td { border: 1px solid black; } 

 <table id="tablaPass" width="100%" height="20" border="0" cellspacing="0" cellpadding="0"> <thead> <tr height="40px"> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">Marca</th> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">Modelo</th> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">Version</th> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">Puertas</th> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">Potencia</th> <th style="padding: 10px;" background="<html:rewrite page='/images/layout/capcelera2.gif' />" valign="middle" class="TituloPestana">F. Lanzamiento</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> <br> <button onclick="myFunction()">Try it</button> <input type="button" onclick="removeTable('tableBody');" value="Remove!" /> 

Answer 1

Clear just the rows:

var tbody = document.getElementById('tableBody');
var rows = tbody.querySelectorAll('tr');

for (i = 0; i < rows.length; i++)
    tbody.removeChild(rows[i]);

 function myFunction() { var stock = [] stock[0] = ["Cars", "1", "2", "3", "4", "5"] stock[1] = ["Veggies", "11", "22", "33", "44", "55"] stock[2] = ["Colors", "111", "222", "333", "444", "555"] stock[3] = ["Numbers", "1111", "2222", "3333", "4444", "55555"] stock[4] = ["Requests", "28.625", "68.625", "22", "22", "22"] var table = document.getElementById("tableBody"); for (i = 0; i < stock.length; i++) { var row = table.insertRow(i); for (j = 0; j < stock[i].length; j++) { var cell = row.insertCell(j); cell.innerHTML = stock[i][j]; } } } function removeTable(id) { // Get the table body var tbody = document.getElementById(id); // Find and remove all the <tr> in the body var rows = tbody.querySelectorAll('tr'); for (i = 0; i < rows.length; i++) tbody.removeChild(rows[i]); } document.getElementById('tryit').addEventListener('click', myFunction); document.getElementById('removeit').addEventListener('click', function() { removeTable('tableBody'); }); 

 table, td { border: 1px solid black; } th { padding: 10px; } 

 <table id="tablaPass" width="100%" height="20" border="0" cellspacing="0" cellpadding="0"> <thead> <tr height="40px"> <th valign="middle">Marca</th> <th valign="middle">Modelo</th> <th valign="middle">Version</th> <th valign="middle">Puertas</th> <th valign="middle">Potencia</th> <th valign="middle">F. Lanzamiento</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> <br> <button id="tryit">Try it</button> <button id="removeit">Remove</button> 

Answer 2

Check this out, this is another way to do it

function removeTable(id)
      {
        var tbl = document.getElementById(id);
        tbl.innerHTML = ''
      }