javascript - 最後の要素なしでテーブルに追加

Question

    ​<table id="table">
    <tr><td>one</td><td>two</td></tr>

    <tr id="sum"><td>sum</td><td>sum2</td></tr>
    </table>

    ​&lt;span id="add">add new</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$('#add').click(function(){
   $('#table').append('<tr><td>one</td><td>two</td></tr>');
})​

最後から2番目の要素としてappendを使用して新しい要素を追加するにはどうすればよいですか? #sum が最後の要素であることを望みます。

Answer 1

使用insertBefore():

$('#add').click(function(){
   $('<tr><td>one</td><td>two</td></tr>').insertBefore('#sum');
})​

JS フィドルのデモ。

複数のtbody要素を単純に使用することもできます。1 つは行を含み、もう 1 つは行を含みます。#sumこの例では次のようになり#contentます。

<table id="table">
    <tbody id="content">
        <tr><td>one</td><td>two</td></tr>
    </tbody>
    <tbody>
        <tr id="sum"><td>sum</td><td>sum2</td></tr>
    </tbody>
</table>

jQuery の場合:

$('#add').click(function(){
   $('#content').append('<tr><td>one</td><td>two</td></tr>');
})​

JS フィドルのデモ。

または、おそらく、 a を使用しますtfoot(ただし、これが要素の適切なユースケースであるかどうかはわかりませんtfoot:

<table id="table">
    <tfoot>
        <tr id="sum"><td>sum</td><td>sum2</td></tr>
    </tfoot>
    <tbody id="content">
        <tr><td>one</td><td>two</td></tr>
    </tbody>
</table>

そしてjQuery：

$('#add').click(function(){
   $('table tbody').append('<tr><td>one</td><td>two</td></tr>');
})​

JS フィドルのデモ。

参考文献:

• insertBefore().
• HTML ドキュメント内の表: 行グループ: 、THEAD、TFOOTおよびTBODY要素。

Answer 2

使用できます.before()

$('#add').click(function(){
   $('#sum').before('<tr><td>one</td><td>two</td></tr>');
})​

Answer 3

本当に簡単です:)使用before

$('#add').click(function(){
   $('#sum').before('<tr><td>one</td><td>two</td></tr>');
})​;

Answer 4

ただ行う：

$('#sum').before('<tr><td>one</td><td>two</td></tr>');