1

我正在努力设置 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 写什么。

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

4

3 回答 3

1

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

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

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

现在，当您单击按钮删除不需要的行时，您只需要类的名称来选择要删除的所有行......在这种情况下，它将删除上面列出的两行：

$('#example').click(function(){
    $('.uniquely_named_class').remove();
});
于 2013-05-02T19:30:08.790 回答
0

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

$('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();
})
于 2013-05-02T18:28:52.827 回答
0

这是我最终做的事情：

第 1 步：我将行的 id 传递给子行（从 ajax 插入的行）。然后，我将其中每个的 data-id 设置为该值。

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

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

如果有人有更好的方法，请添加您的评论，我欢迎不同的方法！谢谢！

于 2013-05-02T19:10:11.490 回答