javascript - テーブルの最初の行の上に新しい行を追加する

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

メソッドを使用し.prepend()ます。この関数は、まさに必要なことを行います。

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

次のようなものを使用できます。

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