使用 jquery dataTable 删除 html 表行时遇到问题答案

【问题标题】：Having issue deleting a html table row using jquery dataTable使用 jquery dataTable 删除 html 表行时遇到问题
【发布时间】：2014-07-31 16:07:01
【问题描述】：

我有一个 html 表，其中包含来自数据库的数据。

我想做的是从 html 表中删除一行，但不在数据库中。

在我的操作列中，我在每一行都有一个删除按钮，如果我在该特定行上按删除，则应该删除该行。

我想删除 html 表中的特定行，而不是数据库中的实际数据。

脚本：

$(document).ready(function(){
$.ajax({
url: 'process.php',
type: 'post',
data: {tag: 'getData'},
dataType: 'json',
success: function(data){
        if(data.success){
            $.each(data, function(index, record){
                if($.isNumeric(index)){
                    var row = $("<tr />");
                    $("<td />").text(record.name).appendTo(row);
                    $("<td />").text(record.age).appendTo(row);
                    $("<td />").text(record.gender).appendTo(row);
                    $("<td />").html(record.action).appendTo(row);
                    row.appendTo("#myTable2 tbody");
                }
            })
            }
            $('#myTable2').dataTable({
            "bjQueryUI": true,
            "sPaginationType": "full_numbers"
            });

            $("#myTable2 .dltRow").bind( "click", function(event) {
            var target_row = $(this).closest("tr").get(0);
            var aPos = oTable.fnGetPosition(target_row); 
            oTable.fnDeleteRow(aPos);
            });

        }

});

});

【问题讨论】：

标签： javascript jquery html ajax datatable

【解决方案1】：

当您引用刚刚创建的行时，将您的事件绑定到您的 each 函数会更容易：

$.each(data, function(index, record){
    if($.isNumeric(index)){
        var row = $("<tr />");
        $("<td />").text(record.name).appendTo(row);
        $("<td />").text(record.age).appendTo(row);
        $("<td />").text(record.gender).appendTo(row);

        var $actionCell = $("<td />");
        $actionCell.html(record.action)
        $actionCell.find('.dltRow').on("click", 
            function() { row.remove(); });
        $actionCell.appendTo(row);
        row.appendTo("#myTable2 tbody");
    }
})

或者您可以将其保留在您的 bind 调用中并在那里使用 remove 方法：

$("#myTable2 .dltRow").bind( "click", function(event) {
    $(this).closest("tr").remove();
});

【讨论】：