我有一个有 12 列的表格。每列都有一个文本框。
When I click on an 'Add' button, a new row should be inserted above the first row of the table
。我该怎么做呢?比如说,如果我使用 jquery append(),它只会在末尾添加行,但我想在第一行的顶部添加。
尝试
$("#tableId tbody").prepend("<tr>..</tr>");
在 Vanilla JavaScript 中,它真的很简单:
var firstRow = yourTable.rows[0];
firstRow.parentNode.insertBefore(newRow,firstRow);
使用 .prepend
$("#tableId tbody").prepend("tr code here");
你可以使用这样的东西:
$('table > tbody > tr:first').before('<tr>...</tr>');
试试这个:
<table id="tblTest">
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<table>
<tr>
<td><input type="button" value="Add" id="btnAdd"></input></td>
</tr>
</table>
var row = $("#tblTest tbody").html();
$("#btnAdd").click(function(){
$("#tblTest tbody").prepend(row);
});
使用
.prepend()
方法。这个功能正是您所需要的。
在 Vanilla JavaScript 中,在表格顶部添加新行非常简单:
const table = document.getElementById("myTable");
var row = myTable.insertRow(1); // Give index as 1
var cell1= row.insertCell(0);
var cell2= row.insertCell(1);
cell1.innerHTML = "Contents in cell1";
cell2.innerHTML = "Contents in cell2";
将
insertRow()
方法的索引指定为 1
。