无刷新删除数据删除过程中渐变显示当前删除的行

最新推荐文章于 2025-09-10 12:00:08 发布

原创最新推荐文章于 2025-09-10 12:00:08 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的无刷新删除功能示例。通过AJAX进行后台交互，实现数据的即时删除，并通过动画效果反馈操作结果。

本站已经有类似的案例，这边推荐一个可以参考的《jquery 漂亮的删除确认和提交无刷新删除》

不过对于学习的话可以看看不同的

演示

  JavaScript Code
 

  <script type="text/javascript">  
$(function() {  
$(".delete_button").click(function() {  
var id = $(this).attr("id");  
var dataString = 'id='+ id ;  
var parent = $(this).parent();  
      
$.ajax({  
   type: "POST",  
   url: "deleteajax.php",  
   data: dataString,  
   cache: false,  
  
   beforeSend: function()  
   {  
   parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;  
   },   
   success: function()  
   {  
     
    parent.slideUp('slow', function() {$(this).remove();});  
      
  }  
     
 });  
  
return false;  
    });  
});  
  
  
</script>  

 

  PHP Code
 

  <div id="main">  
<ol class="update">  
<?php  
include("conn.php");  
$sql="select * from add_delete_record order by id desc";   
$result = mysql_query($sql);   
while($row=mysql_fetch_array($result))   
{   
$message=stripslashes($row["content"]);  
$msg_id=$row["id"];    
?>  
<li><?php echo $message; ?>   <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a></li>  
<?php  
}  
?>  
</ol>  
  
  
</div>  

 