Question

我只想问一下如何在单击按钮后在特定元素后添加新元素。

这是我的示例代码：

＆＃13;

    <table id="table-1" border="1" style="border: 1px solid #ccc; width: 100%">
        <thead>
            <tr>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>    
            </tr>
        </thead>
        <tbody id="no-row">
            <td colspan="5">no content</td>
        </tbody>            
                    
        <tfoot>
            <tr>
                <td colspan="5">footer</td>
            </tr>
        </tfoot>    
    </table>
    <button id="add-row">Add Row</button>

＆＃13;

我有这个简单的jquery：

＆＃13;

$('#add-row').on('click', function(){
        var counter = 1;
        var add_row = '<tbody>';
            add_row += '<tr>';
            add_row += '  <td>' + counter + '</td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '</tr>';         
            add_row += '</tbody>';   
        
        $('#table-1 #no-row').remove();
        
        $('#table-1 thead').append(add_row);
                     
        counter++;             
                     
    });

＆＃13;

但它只是将它附加在thead中。

这是小提琴：

http://jsfiddle.net/rochellecanale/gov88ucm/1/

Answer 1

append()在所选元素中插入指定的内容。要在元素之后插入它，请使用after()方法：

$('#table-1 thead').after(add_row);

Updated fiddle

如何在底部显示最新添加的行？

您可以选择tfoot并使用before()：

$('#table-1 tfoot').before(add_row);

Example fiddle

Answer 2

试试这个......

将$('#table-1 thead').append(add_row);更改为$('#table-1').append(add_row);

var counter = 1;
$('#add-row').on('click', function(){
    var add_row = '<tbody>';
        add_row += '<tr>';
        add_row += '  <td>' + counter + '</td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '</tr>';         
        add_row += '</tbody>';   

    $('#table-1 #no-row').remove();

    $('#table-1').append(add_row);

    counter++;             

});

Answer 3

您需要使用after关键字。 after关键字在匹配元素集合中的每个元素之后插入由参数指定的内容。

$('#table-1 thead').after(add_row);

Answer 4

您的<tbody>缺少<tr>

<tbody>
  <tr id="no-row">
    <td colspan="5">no content</td>
  </tr>
</tbody>

更改您的add_row以移除tbody，然后直接追加到tbody

$('#table-1 #no-row').remove();
$('#table-1>tbody').append(add_row)

这样，你的追加功能可以重复使用，因为你每次都在重新添加tbody。

要专门回答这个问题，您可以将ID添加到tr，如上所述，从tbody移除add_row并在no-row之后添加：

$('#table-1 #no-row').hide();
$('#table-1 #no-row').after(add_row)

如何使用选择器在元素后插入新元素

4 个答案: