Question

我正在克隆一个包含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/

Answer 1

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

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

基本上，当你使用.click（）时，它会将该函数绑定到它可以找到的与选择器匹配的所有元素，在文档就绪时，它只是一个表。 .on（）适用于所有前进的元素，而不仅仅是脚本运行时存在的元素。

如果您真的想使用.click（）而不是.on（），请在创建第二个表后重新绑定点击次数。

这是一篇有关simalar问题的帖子： Using jQuery .on() to make a drop-down menu

Answer 2

.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类。此外，它仅在表格上插入克隆行，该表格是单击按钮的父级。

<强> DEMO

Jquery克隆，插入和操作插入的元素

2 个答案: