javascript - HTML - 如何以前置方式插入行？

Question

我正在尝试在原始行下方添加一组新行，并同时具有删除功能和添加功能。幸运的是我碰到了w3schools的一篇文章:http://www.w3schools.com/jsref/met_table_insertrow.asp

但是它会在原始单元格之上添加新单元格，我该如何调整它才能使其正常工作？

代码:

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table><br>

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

<script>
function myCreateFunction()
{
var table = document.getElementById("myTable");
  {
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
  }
}
function myDeleteFunction()
{
document.getElementById("myTable").deleteRow(0);
}
</script>

Answer 1

insertRow()将新行的位置作为(可选)参数。因此，如果您想要在表的末尾添加新行，请像这样插入一个相应的索引:

var row = table.insertRow( table.rows.length );

Example Fiddle

在您的代码中，您将索引设置为 0，根据定义，它是第一行。