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

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（）有關文檔， 請單擊此處
2） .insertBefore（）有關文檔， 請單擊此處
3） .prepend（）用於文檔請點擊這里

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

小提琴