表追加没有最后一个元素

时间:2012-09-15 17:01:43

标签: javascript jquery html

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

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

    ​<span id="add">add new</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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

如何使用append作为倒数第二个元素来添加新元素?  我希望#sum仍然是最后一个元素。

4 个答案:

答案 0 :(得分:7)

使用insertBefore()

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

JS Fiddle demo

您还可以简单地使用多个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 Fiddle demo

或者,可能使用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 Fiddle demo

参考文献:

答案 1 :(得分:1)

您可以使用.before()

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

答案 2 :(得分:1)

非常简单:)使用before

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

答案 3 :(得分:1)

只是做:

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