删除数据表中的特定行时出现问题答案

【问题标题】：Having issue deleting a specific row in datatables删除数据表中的特定行时出现问题
【发布时间】：2014-07-10 16:20:54
【问题描述】：

我想做的是在表中添加数据后，我可以在操作列中选择是否删除它。

我的问题是，如果我按下要删除的特定行上的删除按钮，则会删除表上不应该删除的一些内容。有时它会删除表格的所有内容。

 oTable = $('#myTable').dataTable();

       var data = [
             $('#name').val(),
             $('#age').val(),
             $("#gender:checked").val(),
             "<button class='delete'>Delete</button>"
          ];

          oTable.fnAddData(data);



$('.delete').click(function(){
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});

【问题讨论】：

标签： javascript jquery html datatable datatables

【解决方案1】：

每次创建行时，都会在已经存在的删除操作上绑定另一个 delete 事件。因此，如果您在该行中创建 3 个项目，则删除绑定如下所示：

ROW1 // <- Deletes on ROW1 'Delete' clicks
ROW2 // <- Deletes on ROW1, ROW2 'Delete' clicks
ROW3 // <- Deletes on ROW1, ROW2, ROW3 'Delete' clicks

所以点击 ROW1 上的delete 基本上也会在它之后创建的每一行上调用 delete。

解决方法是将您的 $('.delete').click(function(){...}); 代码移到 save 事件之外，这样您就不会在每次保存/添加新行时都堆积删除绑定。

而且，由于您正在动态添加新的 DOM 元素，我们希望以稍微不同的方式监视删除事件，以便我们可以将 delete 代码绑定到任何新添加的按钮/行。

现在您的代码应该如下所示：

// Moved outside save function to reference other places
oTable = $('#myTable').dataTable();

$('#Save').click(function () {
    if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
        $("#dialog-confirm").dialog("open");

    } else {

        var data = [
        $('#name').val(),
        $('#age').val(),
        $("#gender:checked").val(),
            "<button class='delete'>Delete</button>"];

        oTable.fnAddData(data);
    }
});

// Moved outside save function and changed how the event bindings occur
$(document).on('click', '.delete', function () {
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});

你可以看到工作版本here

【讨论】：