Question

这里我在动态添加表并动态添加行时遇到问题。在这里我尝试了：https://jsfiddle.net/753ynxn3/`

$(document).on('click', "#add_row" + j, function() {
     $(this).siblings('.appendHere').children('table').children('tbody').children('#addr' + j).html("<td>" + (j + 1) + "</td><td><input type='text' name='attribute0'  placeholder='Attribute' class='form-control'/></td><td><input type='text' name='productId0' placeholder='Product Id' class='form-control'/></td>");
      $(this).siblings('.appendHere').children('table').children('tbody').append('<tr id="addr' + (j + 1) + '"></tr>');
      j++;
    });

当我添加第3个表并且点击此表中的添加行时，它正在添加表格。

Answer 1

问题是，当你每次点击添加行按钮时，j的值正在递增和更改，另一方面当你点击添加表时，j的值不会为新表重置。我们需要重置变量j的值。这是你更新的小提琴：https://jsfiddle.net/j2mkL0qp/

我做了这个主要更新：

 j = parseInt($(this).siblings('.appendHere').children('table').children('tbody').children('tr:nth-last-child(2)').children('td:first-child').text())

Answer 2

$(document).on('click', "#add_row" + j, function() {
    // snip
});

这会将click事件绑定到查找ID与选择器#add_row + j匹配的元素的文档。在您的情况下，j在绑定事件时为1，因此您的事件委托只会针对ID为#add_row1的元素或您案例中的第二个表格触发。后续表将没有与该选择器匹配的“添加行”按钮。

（顺便提一下，您的“添加行”按钮适用于第一个表，因为您有一个单独的单击事件绑定到与选择器#add_row0匹配的文档。）

j在事件监听器的回调中像计数器一样递增，但这不会影响事件监听器尝试匹配的选择器字符串：它在运行时绑定一次。您需要使事件监听器中的选择器更通用，以便通过为它们提供公共类或类似的东西来匹配所有未来的元素。

由于您生成的链接如下所示：

<a id='add_row" + i + "' class='btn btn-default pull-left add_row'>Add Row</a>

您可以在事件监听器中使用.add_row作为选择器并匹配它们：

$('document').on('click', '.add_row', function(){
    // snip
};

使用该代码，您可以摆脱匹配#add_row0的事件监听器，因为.add_row选择器也会匹配它。

Here's your fiddle with that update in place.

Answer 3

添加上面的答案，我创建了一个小提琴，每次点击都会添加行。您需要找到一种替代方法来处理行的编号。

    $('document').on('click', '.add_row', function(){
         $(this).siblings('.appendHere').children('table').children('tbody').append($('<tr class="addr"></tr>').html("<td>"+(j+1)+"</td><td><input type='text' name='attribute0'  placeholder='Attribute' class='form-control'/></td><td><input type='text' name='productId0' placeholder='Product Id' class='form-control'/></td>"));  
         j++;   
    };

https://jsfiddle.net/ghvc0zes/

使用jQuery动态添加表并在其中动态添加行

3 个答案: