时间戳

首页 > 解决方案 > 如何使用jquery php mysql删除带有复选框的多行

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

问题描述

索引.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>

删除动作.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：

/* 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();
}

删除脚本.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(); } } }); } } });

这是来自此链接的示例代码：https ://www.phpzag.com/delete-multiple-rows-with-checkbox-using-jquery-php-mysql/

我尝试了所有步骤并尝试调试。但问题是全选复选框不会选中所有复选框，删除按钮也不起作用。

请帮助我解决此代码有什么问题

标签： javascriptphpjqueryajax

解决方案

你需要包括jquery

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

之后尝试这段代码

$( 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/

推荐阅读