首页>>表单>>无刷新删除数据 删除过程中渐变显示当前删除的行(2013-11-07)

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

 本站已经有类似的案例，这边推荐一个可以参考的《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