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

您可以使用以下替代方案

1） .before（）用于文件click here
2） .insertBefore（）用于文档click here
3） .prepend（）用于文档click here

Answer 3

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

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

Answer 4

使用.prepend

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

Answer 5

您可以使用以下内容：

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

Answer 6

使用.prepend()方法。此功能完全符合您的需要。

Answer 7

试试这个：

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

Fiddle

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

7 个答案: