1

我正在克隆一个包含 2 个按钮的表。一个按钮克隆并插入一个新的表格行，另一个按钮克隆整个表格并将其插入到最后一个表格之后。

当一个表被克隆并插入到底部时，我单击“添加”按钮添加一个新行，该行仅插入到顶部表中。

如果我有 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

这是因为绑定克隆行点击事件时，第二个克隆的表不存在。您需要使用 jQuery .on() 函数来执行此操作。

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

基本上，当您使用 .click() 时，它将该函数绑定到它可以找到与选择器匹配的所有元素，在文档准备好时，它只是一个表。.on() 适用于所有元素，而不仅仅是那些在脚本运行时存在的元素。

如果您真的想使用 .click() 而不是 .on()，请在创建第二个表格后重新绑定单击。

这是我遇到类似问题的帖子： Using jQuery .on() to make a drop-down menu

于 2012-05-10T17:35:24.423 回答