使用复选框删除多个记录使用php和ajax

时间:2017-05-28 20:17:42

标签: javascript php html ajax mysqli

我试图从我的数据库中删除一些记录,因为它遵守使其出现在表中的规则,因此我尝试使用php和ajax来完成此操作。虽然我在线复制代码以执行操作。 但这就是我注意到的,无论何时我选择要删除的记录,它都会淡出所选行,但在刷新页面时记录会重新出现,这意味着我遗漏了一些我不知道的东西,这是代码\

的index.php

    <?php
//include auth.php file on all secure pages
require("../db.php");
session_start();
if(!isset($_SESSION["username"])){
header("Location: login");
exit(); }
?>
<?php require_once('header.php')?>  
 <?php
//index.php
$query = "SELECT * FROM consignment WHERE shipmentstatus='Pending'";
$result = mysqli_query($con, $query);
?>
<div class="container content">


   <?php
   if(mysqli_num_rows($result) > 0)
   {
   ?>
   <div class="table-responsive">
  <table id="myTable" class="table table-striped" >  
        <thead>
     <tr>
      <th>Consignment No</th>
        <th>Origin</th>
        <th>Destination</th>
        <th>Pickup Date</th>
        <th>Status</th>
        <th >Action</th>
     </tr>
     </thead>
   <?php
    while($row = mysqli_fetch_array($result))
    {
   ?>
   <tbody>
     <tr id="<?php echo $row["consignmentno"]; ?>" >
       <td><?php echo $row["consignmentno"]; ?></td>
      <td><?php echo $row["shipmentorigin"]; ?></td>
      <td><?php echo $row["shipmentdestination"]; ?></td>
      <td><?php echo $row["shipmentpickupdate"]; ?></td>
      <td><?php echo $row["shipmentstatus"]; ?></td>
      <td><input type="checkbox" name="customer_id[]" class="delete_customer" value="<?php echo $row["consignmentno"]; ?>" /></td>
     </tr>
    </tbody>
   <?php
    }
   ?>
    </table>
   </div>
   <?php
   }
   ?>
   <div align="center">
    <button type="button" name="btn_delete" id="btn_delete" class="btn btn-success">Delete</button>
   </div>
 </body>
</html>

<script>
$(document).ready(function(){

 $('#btn_delete').click(function(){

  if(confirm("Are you sure you want to delete this?"))
  {
   var id = [];

   $(':checkbox:checked').each(function(i){
    id[i] = $(this).val();
   });

   if(id.length === 0) //tell you if the array is empty
   {
    alert("Please Select atleast one checkbox");
   }
   else
   {
    $.ajax({
     url:'deleterecord.php',
     method:'POST',
     data:{id:id},
     success:function()
     {
      for(var i=0; i<id.length; i++)
      {
       $('tr#'+id[i]+'').css('background-color', '#ccc');
       $('tr#'+id[i]+'').fadeOut('slow');
      }
     }

    });
   }

  }
  else
  {
   return false;
  }
 });

});
</script>

<?php require_once('footer.php')?> 

这是删除页面处理器 的 deleterecord.php

<?php
require("../db.php");
session_start();
if(!isset($_SESSION["username"])){
header("Location: login");
exit(); }
?>
<?php
if(isset($_POST["id"]))
{
 foreach($_POST["id"] as $id)
 {
  $query = "DELETE FROM consignment WHERE consignmentno = '".$id."'";
  mysqli_query($con, $query);
 }
}

?>

2 个答案:

答案 0 :(得分:0)

**** HERE正在测试完整代码****       

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<div class="container content">
    <table id="myTable" class="table table-striped" border="1">  
        <thead>  
            <tr>
                <th>Consignment No</th>
                <th>Origin</th>
                <th>Destination</th>
                <th>Pickup Date</th>
                <th>Status</th>
                <th >Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="checkbox" name='consignment_no[]' value="1" /></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="checkbox" name='consignment_no[]' value="2" /></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="checkbox" name='consignment_no[]' value="3" /></td>
            </tr>
        </tbody>
        <tr>
            <td colspan="6" align="center"><button type="button" name="btn_delete" id="btn_delete" class="btn btn-danger">Delete Records</button></td>
        </tr>
    </table>  
</div>
</div>

<script>

 $(document).ready(function () {

    $('#btn_delete').click(function () {

        if (confirm("Are you sure you want to delete this?"))
        {
            var id = [];

            $(':checkbox:checked').each(function (i) {
                id[i] = $(this).val();
            });


            if (id.length === 0) //tell you if the array is empty
            {
                alert("Please Select atleast one checkbox");
            } else
            {
                $.ajax({
                    url: 'deleterecord.php',
                    method: 'POST',
                    data: {id: id},
                    success: function ()
                    {
                        for (var i = 0; i < id.length; i++)
                        {
                         //   $('tr#' + id[i] + '').css('background-color', '#ccc');
                          //  $('tr#' + id[i] + '').fadeOut('slow');

                            $('tr').filter(':has(:checkbox:checked)').find('td').each(function () {

                                $(this).css('background-color', '#ccc');
                                $(this).fadeOut('slow');
                                // this = td element
                            });
                        }
                    }

                });
            }

        } else
        {
            return false;
        }
    });

 });
</script>

</html>

答案 1 :(得分:0)

可能是id中存在一些问题。 尝试在脚本中使用它

$.each($(':checkbox:checked'),function(){ 
id.push($(this).val()); 
});