0

我有一个有 3 行的表格，可以在其中填写值。

现在我在最后一个 tr 中有一个链接，上面写着“+ More”。

如果按预期工作，“+ More”链接应该克隆上面的 tr 并将其附加到链接上方。

这是我有多远：

http://jsfiddle.net/9s8LH/2/

$(document).ready(function(){
    $('.appendRow').bind('click', function(){
        var $table = $(this).closest('table');

        var $tr = $(this).closest('tr');
        var $trAbove = $(this).prev('tr');

        $table.append($tr.clone());

    });
});

我试图prev('tr')在我在里面的那个之前抓住 TR 元素，但它并没有真正起作用。

第二个问题是它附加在 +More TR 之下，而不是它之上。

如何才能做到这一点？

4

2 回答 2

3

$(this).prev('tr')不起作用的原因是您的appendRow课程在链接上，而不是在行上。没有tr紧接在链接之前，prev查看前一个兄弟元素（sibling = 在同一个父元素内）以查看它是否与选择器匹配。它不会扫描，也不会上升到层次结构。

不过，您已经很接近了，请参阅评论：更新的小提琴

$(document).ready(function(){
    $('.appendRow').bind('click', function(){
        // First get the current row
        var $tr = $(this).closest('tr');

        // Now the one above it
        var $trAbove = $tr.prev('tr');

        // Now insert the clone
        $trAbove.clone().insertBefore($tr);
    });
});

注意使用insertBefore，它将在当前行之前插入克隆。

于 2013-11-07T08:13:38.270 回答
0

尝试使用on()动态添加元素，你的HTML应该是这样的，

HTML

<table class="extraBookingBox">
    <tr><td>Fees</td><td>Amount</td></tr>
    <tr>
        <td><input type="text" style="width: 40px;" name="cancelfee_price[]" />€&lt;/td>
        <td><input type="text" style="width: 40px;" name="cancelfee_price[]" />€&lt;/td>
    </tr>
    <tr>
        <td colspan="2"><a href="#" class="appendRow">+ More</a></td>
    </tr>
</table>

脚本

$(document).ready(function(){
    $(document).on('click','.appendRow', function(){        
        var $tr = $('table tr:nth-child(2)').clone(); 
        console.log($tr);
        $tr.insertBefore($('.appendRow').closest('tr'));        
    });
});

演示

于 2013-11-07T08:14:43.663 回答