Question

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

如果不清楚，这里是一个JSFiddle（我希望行显示在Headers下方，而不是上面）：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.我的猜测是因为第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";
}

Answer 2

只需将insertRow(0)更改为insertRow(-1)

即可

JavaScript - 从上到下添加表格行

2 个答案: