php - 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 行:(//新行 -there comment-//直到这里)

    <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>