如何在删除时删除行形式 ajax

Question

你好，当我删除它正在从数据库中删除的任何记录时，我正在尝试使用复选框删除删除一行，我可以看到刷新页面。

我想在不刷新的情况下删除行我该如何实现：这是我的列表代码：

<tbody>
    <?php while($staffResults=$staffQuery->fetch_assoc()){ ?>
        <tr>
            <td><input type="checkbox" class="staff-list" name="checked" value="<?php echo $staffResults['id_staff']; ?>"></td>
            <td><?php echo $staffResults['staff_name']; ?></td>
            <td><?php echo $staffResults['staff_email']; ?></td>
            <td><?php echo $staffResults['staff_phone']; ?></td>
            <td><?php  $datetime = $staffResults['staff_registered'];
            echo  date("d-m-Y", strtotime($datetime));   ?></td>
        </tr>
    <?php } ?>
</tbody>

和删除按钮：

<button type="button" id="deleteStaffList" class="btn btn-sm btn-default" title="Remove"><i class="fa fa-trash-o"></i></button>

这是我的脚本和 ajax 代码。

<script language="JavaScript">  
    $("#deleteStaffList").click(function()
    {
        $("#delshowMessageDiv").hide();
        $("#delshowMessage").html('');
        var deleteStaffList = $('.staff-list:checkbox:checked').map(function(){
            return $(this).attr('value');
        }).get().join(",");
        console.log(deleteStaffList); 
        $.ajax({
            url: "staffcontroller.php",
            method: "POST",
            data: { delData : deleteStaffList, 'action':'delete'},
            dataType: "json",
            success: function (response) {
                if(response["success"]==true)
                {
                    $("#delshowMessageDiv").hide();
                    $("#delshowSuccessMessageDiv").show();
                    $("#delshowSuccessMessage").html(response["message"]);
                    }else{
                    $("#delshowMessageDiv").show();
                    $("#delshowMessage").html(response["message"]);
                }   
            },
            error: function (request, status, error) {
                $("#delshowMessageDiv").show();
                $("#delshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
            }
        });
        return false;
    }); 
</script>

Answer 1

您可以按如下方式放置 3 行：（// 新行 - 那里有评论 - // 直到这里）

    <script language="JavaScript">  
    $("#deleteStaffList").click(function()
    {
        $("#delshowMessageDiv").hide();
        $("#delshowMessage").html('');
        var deleteStaffList = $('.staff-list:checkbox:checked').map(function(){
            return $(this).attr('value');
        }).get().join(",");
        console.log(deleteStaffList); 
        $.ajax({
            url: "staffcontroller.php",
            method: "POST",
            data: { delData : deleteStaffList, 'action':'delete'},
            dataType: "json",
            success: function (response) {
                if(response["success"]==true)
                {
                    $("#delshowMessageDiv").hide();
                    $("#delshowSuccessMessageDiv").show();
                    $("#delshowSuccessMessage").html(response["message"]);
                    }else{
                    $("#delshowMessageDiv").show();
                    $("#delshowMessage").html(response["message"]);
                    // new lines
                    $('.staff-list:checkbox:checked').each(function(i,e){
                        $(this).parents('tr').remove();
                    })
                    // till here
                    }   
            },
            error: function (request, status, error) {
                $("#delshowMessageDiv").show();
                $("#delshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
            }
        });
        return false;
    }); 
</script>

如何在删除时删除行形式 ajax

How to delete row form ajax when it is deleted

php

ajax

jquery

parent-child

delete-row