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

1230人阅读 评论(0) 收藏 举报
分类:

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

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

 

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

 

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function() {  
  3. $(".delete_button").click(function() {  
  4. var id = $(this).attr("id");  
  5. var dataString = 'id='+ id ;  
  6. var parent = $(this).parent();  
  7.       
  8. $.ajax({  
  9.    type: "POST",  
  10.    url: "deleteajax.php",  
  11.    data: dataString,  
  12.    cache: false,  
  13.   
  14.    beforeSend: function()  
  15.    {  
  16.    parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;  
  17.    },   
  18.    success: function()  
  19.    {  
  20.      
  21.     parent.slideUp('slow'function() {$(this).remove();});  
  22.       
  23.   }  
  24.      
  25.  });  
  26.   
  27. return false;  
  28.     });  
  29. });  
  30.   
  31.   
  32. </script>  

 

PHP Code
  1. <div id="main">  
  2. <ol class="update">  
  3. <?php  
  4. include("conn.php");  
  5. $sql="select * from add_delete_record order by id desc";   
  6. $result = mysql_query($sql);   
  7. while($row=mysql_fetch_array($result))   
  8. {   
  9. $message=stripslashes($row["content"]);  
  10. $msg_id=$row["id"];    
  11. ?>  
  12. <li><?php echo $message; ?>   <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a></li>  
  13. <?php  
  14. }  
  15. ?>  
  16. </ol>  
  17.   
  18.   
  19. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_104.html

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1716465次
    • 积分:23941
    • 等级:
    • 排名:第266名
    • 原创:506篇
    • 转载:792篇
    • 译文:0篇
    • 评论:89条
    赞助商
    文章分类
    最新评论
    webdemo演示站