如何使用jquery php mysql删除带有复选框的多行

Question

index.php: index.php文件：

<head>
<script type="text/javascript" src="script/delete_script.js"></script>
</head>
<body>
    <div class="container">
        <h2>Example: Delete Multiple Rows with Checkbox using jQuery, PHP & MySQL</h2>
        <table id="employee_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">

            <thead>
                <tr>
                    <th><input type="checkbox" id="select_all"></th>
                    <th>Name</th>
                    <th>Salary</th>
                    <th>Age</th>
                </tr>
            </thead>

            <tbody>

<?php
include_once('db_connect.php');
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 5";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
    ?>

    <tr id="<?php echo $rows["id"]; ?>">
        <td><input type="checkbox" class="emp_checkbox" data-emp-id="<?php echo $rows["id"]; ?>"></td>
        <td><?php echo $rows["employee_name"]; ?></td>
        <td><?php echo $rows["employee_salary"]; ?></td>
        <td><?php echo $rows["employee_age"]; ?></td>
    </tr>

<?php
}
?>

</tbody>
</table>
<div class="row">
    <div class="col-md-2 well">
        <span class="rows_selected" id="select_count">0 Selected</span>
        <a type="button" id="delete_records" class="btn btn-primary pull-right">Delete</a>
    </div>
</div>
</div>

delete_action.php: delete_action.php：

include_once("db_connect.php");
if(isset($_POST['emp_id'])) {
    $emp_id = trim($_POST['emp_id']);
    $sql = "DELETE FROM employee WHERE id in ($emp_id)"
    $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
    echo $emp_id;
}

db_connect.php: db_connect.php：

/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "betadb";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());

    exit();
}

delete_script.js: delete_script.js：

$(document).on('click', '#select_all', 
    function() {
        $(".emp_checkbox").prop("checked", this.checked);
        $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
    });

$(document).on('click', '.emp_checkbox', 
    function() {
        if ($('.emp_checkbox:checked').length == $('.emp_checkbox').length) {
            $('#select_all').prop('checked', true);
        } else {
            $('#select_all').prop('checked', false);
        }
        $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
    }); 
$('#delete_records').on('click', 
    function(e) {
        var employee = [];
        $(".emp_checkbox:checked").each (
            function() {
                employee.push($(this).data('emp-id'));
            });

        if(employee.length <=0) { alert("Please select records."); 
    } else {
        WRN_PROFILE_DELETE = "Are you sure you want to delete "+(employee.length>1?"these":"this")+" row?";
        var checked = confirm(WRN_PROFILE_DELETE);

        if(checked == true) {
            var selected_values = employee.join(",");
            $.ajax({
                type: "POST",
                url: "delete_action.php",
                cache:false,
                data: 'emp_id='+selected_values,
                success: function(response) {

                    var emp_ids = response.split(",");
                    for (var i=0; i < emp_ids.length; i++ ) { $("#"+emp_ids[i]).remove(); } } }); } } });

This is an example code from this link: https://www.phpzag.com/delete-multiple-rows-with-checkbox-using-jquery-php-mysql/ 这是此链接的示例代码： https ： //www.phpzag.com/delete-multiple-rows-with-checkbox-using-jquery-php-mysql/

I tried all the steps and tried to debug. 我尝试了所有步骤并尝试调试。 But the problem is the select all checkbox wont select all the checkboxes and the delete button also does not work. 但问题是全选复选框不会选中所有复选框，删除按钮也不起作用。

Please help me with what's wrong with this code 请帮我解决这段代码的错误

Answer 1

you need to include jquery 你需要包含jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

after that try this code 之后尝试此代码

$( document ).ready(function() {
    /*-------------------
To sleect/deselect all
---------------------- */
$("#select_all").click(function()  {
var status = $(this).is(":checked") ? true : false;    
$('.emp_checkbox').prop('checked', status);
 $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});

/*------------------------------
TO select/deselect single check box
------------------------------------- */

$('.emp_checkbox').click(function() {


     var status = $(this).is(":checked") ? true : false;  
    $(this).prop('checked', status);
   $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});


$('#delete_records').on('click', 
function(e) {
    var employee = [];
    $(".emp_checkbox:checked").each (
        function() {
            employee.push($(this).data('emp-id'));
        });

    if(employee.length <=0) { alert("Please select records."); 
} else {
    WRN_PROFILE_DELETE = "Are you sure you want to delete "+(employee.length>1?"these":"this")+" row?";
    var checked = confirm(WRN_PROFILE_DELETE);

    if(checked == true) {
        var selected_values = employee.join(",");
        $.ajax({
            type: "POST",
            url: "delete_action.php",
            cache:false,
            data: 'emp_id='+selected_values,
            success: function(response) {

                var emp_ids = response.split(",");
                for (var i=0; i < emp_ids.length; i++ ) { 
              $("#"+emp_ids[i]).remove(); } } }); } } });

       });

http://jsfiddle.net/jceqfhzo/ http://jsfiddle.net/jceqfhzo/

如何使用jquery php mysql删除带有复选框的多行

问题描述

1 个解决方案

解决方案1
0 2019-04-03 07:47:33

如何使用jquery php mysql删除带有复选框的多行

问题描述

1 个解决方案

解决方案1 0 2019-04-03 07:47:33

解决方案1
0 2019-04-03 07:47:33