1

ユーザーが行を追加および削除できる動的テーブルがあります。ユーザーがボタンをクリックして行を追加するときに、最初のテーブル行のコピーである保存されたjQueryオブジェクトをDOMに挿入したいと思います.baseRow。この行内には、将来追加される行のために存続する委任されたクリックイベントも必要です。

ただし、現在の実装（Chrome / IEでテスト済み）には2つの問題があります。1つ目は、最初のイベントが発生した後にクリックハンドラーが中断することです。.html()の後にチェーンすることでこれを解決できます.clone()が、そうすると、クローンから親要素が不可解に削除されtr、子要素のみに縮小されます。

問題の例については、このjsフィドルを参照してください。コードのサンプルについては、以下を参照してください。

JS

$('document').ready(function(){
    var $baseRow = $('.baseRow').clone(true,true); 
    $('table').delegate('.addRow','click',function(){
        $('tbody').append($baseRow);
    });
});​

HTML

<table>
    <thead>
        <tr>
            <th>Add Row</th>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="baseRow">
            <td class="addRow">+</td>
            <td>Body 1</td>
            <td>Body 2</td>
        </tr>
    </tbody>
</table>
4

1 に答える 1

3

一度クローンを作成し、そのクローン要素を何度も追加します。クローンは1つしかないため、要素が2つを超えることはありません（元の要素とクローン）。代わりに、クリックされたときにクローンを作成して、クローンの数がクリックの数と等しくなるようにします：http: //jsfiddle.net/YxB9J/5/。

$(document).ready(function(){
    var $baseRow = $('.baseRow'); 
    $('table').delegate('.addRow','click',function(){
        $('tbody').append($baseRow.clone(true, true));
    });
});
于 2012-11-09T21:46:25.850 に答える