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

【问题标题】：Adding a new row above the first row of a table在表格的第一行上方添加新行
【发布时间】：2013-08-16 17:51:03
【问题描述】：

我有一个 12 列的表。每列都有一个文本框。 When I click on an 'Add' button, a new row should be inserted above the first row of the table。我该怎么做？比如说，如果我使用 jquery append()，它只会在最后添加行，但我想在第一行的顶部添加。

【问题讨论】：

javascript: how to append div in "begining" of another div的可能重复

标签： javascript jquery dom

【解决方案1】：

试试

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

【讨论】：

【解决方案2】：

在Vanilla JavaScript，真的很简单：

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

【讨论】：

【解决方案3】：

您可以使用以下替代方法

1) .before() 用于文档click here
2) .insertBefore() 用于文档click here
3) .prepend() 用于文档click here

【讨论】：

【解决方案4】：

使用.prepend

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

【讨论】：

【解决方案5】：

你可以使用这样的东西：

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

【讨论】：

【解决方案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);
});

Fiddle

【讨论】：

【解决方案7】：

使用.prepend() 方法。此功能完全满足您的需求。

【讨论】：