javascript - 从 id 中删除表内容

Question

我有一个从 Javascript 生成行的函数，以及一个清除它的函数，但是删除时我不能使用该函数再次创建，因为它会删除所有行。我只需要删除内容，不知道如何删除。

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

只清除行:

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>