Question

我有一个包含3行的表格，其中包含输入，您可以在其中填充值。

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

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

这就是我的目标：

$(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元素，但它确实不起作用。

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

如何做到这一点？

Answer 1

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

你很近，见评论：Updated Fiddle

$(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，它将在当前行之前插入克隆。

Answer 2

尝试使用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[]" />€</td>
        <td><input type="text" style="width: 40px;" name="cancelfee_price[]" />€</td>
    </tr>
    <tr>
        <td colspan="2"><a href="#" class="appendRow">+ More</a></td>
    </tr>
</table>

<强> SCRIPT

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

Demo

克隆并将前一个tr行附加到当前表

2 个答案: