我试图删除一行而不改变页面

<?php
          while ($row = mysqli_fetch_array($query,MYSQLI_BOTH)) 
          {
            $id= $_POST['tran_no'];;
        ?>

              <tbody>
                  <tr id=<?php echo $row['trans_no']?>>
                    <td><?php echo $row['trans_no']?></td>
                    <td><?php echo $row['obj_code']?></td>
                    <td><?php echo $row['div_no']?></td>
                    <td><?php echo $row['check_no']?></td>
                    <td><?php echo $row['payee']?></td>
                    <td><?php echo $row['payment']?></td>
                    <td><?php echo $row['add']?></td>
                    <td><?php echo $row['amount']?></td>
                    <td><?php echo $row['amountw']?></td>
                    <td>
                      <a href="#" id="<?php echo $id; ?>" class="delete" title="Delete"><img src="image/remove.png"></a>
                    </td>
                  </tr>

        <?php
      }
      ?>

                    </tbody>
                </table>
            </div>
      <script src="jquery.js"></script>
      <script type="text/javascript">
      $(function() {
      $(".delete").click(function(){
      var element = $(this);
      var del_id = element.attr("trans_no");
      var info = 'trans_no=' + del_id;
      if(confirm("Are you sure you want to delete this?"))
        {
          $.ajax({
          type: "POST",
          url: "delete.php",
          data: info,
          success: function(){
        }
        });
          $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
          .animate({ opacity: "hide" }, "slow");
        }
      return false;
        });
        });
      </script>

My problem is the ajax code doesnt seem to delete the row i dont know if the ajax code is executed or not. help would be much need, and please give me an insight as to what is the problem with my code or if i have to add something. heres the delete.php

<?php
$con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
if($_POST['trans_no'])
{
$id=$_POST['trans_no'];
$delete = "DELETE FROM table_no WHERE trans_no = '$id'";
$res=mysqli_query($con,$delete);
}

?>

OPTION 1:

You are assigning id from database to id attribute and in AJAX, reading trans_no.

trans_no attribute is not set for the delete link.

That is why you are not getting it.

Change your HTML to

<a href="#" trans_no="<?php echo $id; ?>" class="delete" title="Delete"><img src="image/remove.png"></a>

To make it HTML5 Compliant:

<a href="#" data-id="<?php echo $id; ?>" class="delete" title="Delete"><img src="image/remove.png"></a>

And change JS:

var del_id = element.attr("data-id");

OPTION 2

Just change the line:

var del_id = element.attr("trans_no");

To

var del_id = element.attr("id");

And use your existing code.

It will work.

Try this:

$(function() {
  $(".delete").click(function(){
     var element = $(this);         
     var transNoVar = element.attr('id');

     if(confirm("Are you sure you want to delete this?"))
     {
         $.ajax({
            type: "POST",
            url: "delete.php",
            data: {
                trans_no: transNoVar
            },
            success: function(data){
                // delete.php return 1 on success 0 otherwise, check it here
                if(data=='1') {
                    // on success hide the tr
                    // add class="show" to the tr
                    $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
      .animate({ opacity: "hide" }, "slow");
                } else {
                    alert('Error deleting your record');
                }
            }
        });          
    }
    return false;
  });
});

Try the below code,

$(".delete").click(function(){
   var element = $(this);
   var del_id = this.id;// use this.id as your database id related to element id
   var info = {trans_no : del_id};
   if(confirm("Are you sure you want to delete this?")){
      $.ajax({
        type: "POST",
        url: "delete.php",
        data: info,
        success: function(data){
            if(data=='success'){
                 // hide only in case of successful deltion
                 element.parents(".show").animate({ backgroundColor: "#003" }, "slow")
                  .animate({ opacity: "hide" }, "slow");
            } else {
                alert('Error while deleting');
            }
        }
      });          
   }
   return false;
});

And in PHP return success or error like,

<?php
  $con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
  $status='error';
  if(isset($_POST['trans_no']) && $_POST['trans_no']){
     $id=$_POST['trans_no'];
     $delete = "DELETE FROM table_no WHERE trans_no = '$id'";
     $res=mysqli_query($con,$delete);
     if($res){// only success in case of deleted.
        $status='success';
     }
  }
  echo $status;
?>