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

我怎样才能使这个添加新元素与追加作为倒数第二个元素？我希望#sum 仍然是最后一个元素。

Answer 1

使用insertBefore()：

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

JS 小提琴演示。

您也可以简单地使用多个tbody元素，一个包含#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>');