在表格第一行上方添加新行

Question

我有一个有 12 列的表格。每列都有一个文本框。

When I click on an 'Add' button, a new row should be inserted above the first row of the table

。我该怎么做呢？比如说，如果我使用 jquery append()，它只会在末尾添加行，但我想在第一行的顶部添加。

Answer 1

尝试

$("#tableId tbody").prepend("<tr>..</tr>");

Answer 2

在 Vanilla JavaScript 中，它真的很简单：

var firstRow = yourTable.rows[0];
firstRow.parentNode.insertBefore(newRow,firstRow);

Answer 3

您可以使用以下替代方案

1) .before() 查看文档 单击此处
2) .insertBefore() 查看文档 单击此处
3) .prepend() 查看文档 单击此处

Answer 4

使用 .prepend

$("#tableId tbody").prepend("tr code here");

Answer 5

你可以使用这样的东西：

$('table > tbody > tr:first').before('<tr>...</tr>');

Answer 6

试试这个：

<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);
});

小提琴

Answer 7

使用

.prepend()

方法。这个功能正是您所需要的。

Answer 8

在 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

。