1

2つのボタンを含むテーブルのクローンを作成しています。1つのボタンは新しいテーブル行を複製して挿入し、もう1つのボタンはテーブル全体を複製して最後のテーブルの後に挿入します。

テーブルが複製されて下部に挿入されたら、[追加]ボタンをクリックして新しい行を追加します。行は上部のテーブルにのみ挿入されます。

5つのテーブルがある場合、対応するテーブルに新しい行を挿入するにはどうすればよいですか？

私のHTML： 

<table class="myTable">
<tr class="firstRow">
    <td>
        Name: <input type="text" size="30" />
    </td>
    <td>
        Email: <input type="text" size="30" />
    </td>
</tr>
<tr>
    <td colspan="2" align="right">
        <input type="button" value="Add" class="addRow" />
    </td>
</tr>
</table>

<p><input type="button" value="Copy" class="addTable" /></p>

jQuery：

$('.addRow').click(function(){
  var cloned = $('.firstRow').clone(true);
  cloned.insertAfter($('table.myTable tr').eq(-2)).removeClass('firstRow');
});


$('.addTable').click(function(){
  var cloned = $('.myTable').clone(true);
  cloned.insertAfter($('.myTable:last')).before('<hr />').removeClass('myTable');
});

私のフィドル： http： //jsfiddle.net/jonxblaze/S3N77/

4

2 に答える 2

1

.addRowボタンの実装は適切ではありません。

これをお試し下さい：

$('.addRow').click(function(){
    var cloned = $(this).parents('table').find('tr:eq(0)').clone(true);
    cloned.insertBefore($(this).parents('table').find('tr:last-child'));
});

上記の実装には.firstRowクラスは必要ありません。また、クリックされたボタンの親であるテーブルにのみ複製された行を挿入します。

デモ

于 2012-05-10T18:01:04.347 に答える
1

これは、クローン行クリックイベントをバインドするときに、2番目のクローンテーブルが存在しないためです。これを行うには、jQuery .on（）関数を使用する必要があります。

http://api.jquery.com/on/

基本的に、.click（）を使用すると、その関数がセレクターに一致するすべての要素にバインドされます。セレクターは、ドキュメントの準備ができている場合、1つのテーブルにすぎません。.on（）は、スクリプトの実行時に存在する要素だけでなく、今後のすべての要素に対して機能します。

本当に.on（）の代わりに.click（）を使用したい場合は、2番目のテーブルを作成した後でクリックを再バインドします。

これは、同様の問題を抱えている私の投稿です： jQuery .on（）を使用してドロップダウンメニューを作成する

于 2012-05-10T17:35:24.423 に答える