Question

我正在努力设置jquery来插入新的表行，然后在我不需要它们时删除它们。

例如：

每个表行都有两个按钮，如下所示：

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

当我点击“添加”按钮时，它将使用ajax出去并获取数据并在当前行之后插入行。这是我的代码（这很好用）：

 $(function() {
        $('#example').on('click', 'input[name="cmdAddRow"]', function() {
            var curRow = $(this).closest('tr');
            $.ajax({
                cache: false,
                type: 'POST',
                url: '{{ path('inventory_low_test_asin_data') }}',
                data: '',
                success: function(data)
                {
                    var newRow = data.htmlData;
                    curRow.after(newRow);
                }
            });
        });
    });

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 | Inserted    | A     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | B     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | C     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | D     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

现在这是一个棘手的部分，如果我不需要插入的那些数据行（有时它将返回当前行之后插入的20行以上），我将需要能够删除所有这些一次性插入的行（不是一次插入一行）。当我点击该行的“删除”按钮时，如何处理？我不确定要为jQuery写什么。

非常感谢你的帮助!!!!

Answer 1

按ID删除元素会限制您一次删除第1行。我建议为属于AJAX请求的每一行分配一个类。每个ajax请求都需要该类是唯一的...为简单起见，您可以在字符串中附加时间戳并将其用作您的类名。

无论您在何处构建表（无论是在服务器端还是客户端），都要添加唯一的类：

<tr class="uniquely_named_class">data....</tr> <tr class="uniquely_named_class">data2....</tr>

现在，当您单击按钮删除不需要的行时，您只需要选择要删除的所有行的类的名称...在这种情况下，它将删除上面列出的两行：< / p>
$('#example').click(function(){ $('.uniquely_named_class').remove(); });

Answer 2

您可以向生成的tr元素添加一个类，然后您可以使用jQuery remove方法简单地选择和删除它们：

$('table').on('click', '.remove', function(){
   $('tr.inserted').remove();
});

或者，如果要选择具有相似.id单元格的下一行（假设它们具有id类名称），则可以使用nextAll方法：

$('#example').on('click', 'input[name="cmdRemRow"]', function() {
     var $this = $(this),
            id = $.trim( $this.parent().siblings('.id').text() );
     $this.closest('tr').nextAll().filter(function(){
         return $.trim( $('td.id', this).text() ) === id;
     }).remove();
})

Answer 3

这是我最终做的事情：

步骤1：我将行的id传递给子行（从ajax插入的行）。然后我将每个数据的id设置为该值。

步骤2：如果单击该行的删除按钮，我将传入该行的ID，并仅删除data-id与该值匹配的子项。

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 });

如果有人有更好的方法，请添加您的意见我欢迎采用不同的方法！谢谢！

Jquery添加行，然后在不需要时删除它们

3 个答案: