JavaScript – 从上到下添加表格行

Question

这个问题已经有答案了:

How to insert row at end of table with HTMLTableElement.insertRow (4 个回答)

已关闭 8 年前。

使用 JavaScript，我将函数附加到两个按钮，其中一个将行添加到表中。但是，我以某种方式使其从底部添加行，因此当您单击它时，它会从顶部将行堆叠在一起。我正在寻找从上到下堆叠的表格行，以便它的长度在底部而不是顶部增加。你如何做到这一点？

如果不清楚，这里有一个 JSFiddle (我希望行出现在标题下方，而不是上方):http://jsfiddle.net/yvzq03LL/

HTML

  <table id="myTable">
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
  </tr>
</table>

<br>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

CSS

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

JavaScript

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "Added row";
    cell2.innerHTML = "Added row";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(0);
}

Answer 1

嗯，我明白了。其中写着 var row = table.insertRow() 的地方，0 内部必须有一个 1。我的猜测是，由于第 0 行是标题，因此第 1 行将是下一行。如果我错了任何人，请纠正我。

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "Added row";
    cell2.innerHTML = "Added row";
}