Question

<table id="tab" border="2">
    <tbody>
        <tr> <td>aaa</td><td>aaa</td></tr>
        <tr> <td>bbb</td><td>bbb</td></tr>
        <tr id="www"> <td><select id="sel">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select> </td><td>ccc</td></tr>
        <tr> <td>xxx</td><td>xxx</td></tr>
        <tr> <td>yyy</td><td>yyy</td></tr>
        <tr> <td>zzz</td><td>zzzz</td></tr>
    </tbody>
</table>

$("#sel").change(function(){

    if( $(this).val() === 'three' )
        $('<tr class="new"><td>new</td><td>new</td></tr>').appendTo('#www');
    else
        $('#tab tr.new').remove();    

});

现场：http://jsfiddle.net/jSMBZ/7/

为什么在#www旁边添加新列而不是下面？我该如何解决？

Answer 1

我认为而不是使用appendTo，你会想要使用insertAfter。这样它应该在标签关闭后插入，而不是在它关闭之前附加到它。

Answer 2

使用

$('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');

Answer 3

而不是append，使用after（docs）：

$('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');

http://jsfiddle.net/9vKH4/

Answer 4

这两行被添加到#www td中，而不是在它之后。要在之后添加它，您需要使用.after(content) jQuery函数，如下所示：

$("#sel").change(function(){ 

if( $(this).val() === 'three' )
    $('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');
else 
    $('#tab tr.new').remove();    

});

以下是带有更新示例的jsFiddle链接，如您所述：[{3}}

appendTo - 旁边而不是下面

4 个答案: