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());

    });
});

内部にある TR 要素の前に TR 要素を取得しようとしましprev('tr')たが、実際には機能しません。

2 つ目の問題は、+More TR の上ではなく下に追加されることです。

これはどのように行うことができますか？

4

2 に答える 2

3

$(this).prev('tr')機能しない理由は、appendRowクラスが行ではなくリンクにあるためです。リンクのtr直前にはありません。前の兄弟要素 (兄弟 = 同じ親内) を見て、セレクターと一致するかどうかを確認します。スキャンしませんし、階層を上ることもありません。prev

あなたはかなり近いですが、コメントを参照してください：更新されたフィドル

$(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 に答える