首页>>表单>>Jquery无刷新实时更新表格数据(2013-10-03)

Jquery无刷新实时更新表格数据

 本例与《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》差不多的功能，但是本例的更新是一次更新一行数据，具体的请看更新文件table_edit_ajax.php。

数据库当然也是相同的，

Jquery无刷新实时更新表格数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

PHP Code
  1. <table width="600" align="center">  
  2. <tr class="head">  
  3. <th>First</th><th>Last</th>  
  4. </tr>  
  5. <?php  
  6. $sql=mysql_query("select * from add_delete_record");  
  7. $i=1;  
  8. while($row=mysql_fetch_array($sql))  
  9. {  
  10. $id=$row['id'];  
  11. $content=$row['content'];  
  12. $text=$row['text'];  
  13.   
  14. if($i%2)  
  15. {  
  16. ?>  
  17. <tr id="<?php echo $id; ?>" class="edit_tr">  
  18. <?php } else { ?>  
  19. <tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">  
  20. <?php } ?>  
  21. <td width="50%" class="edit_td">  
  22. <span id="first_<?php echo $id; ?>" class="text"><?php echo $content; ?></span>  
  23. <input type="text" value="<?php echo $content; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />  
  24. </td>  
  25. <td width="50%" class="edit_td">  
  26. <span id="last_<?php echo $id; ?>" class="text"><?php echo $text; ?></span>   
  27. <input type="text" value="<?php echo $text; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>  
  28. </td>  
  29. </tr>  
  30.   
  31. <?php  
  32. $i++;  
  33. }  
  34. ?>  
  35.   
  36. </table>  
  37. <div align="center"><s  

主要是js文件

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {  
  4. $(".edit_tr").click(function()  
  5. {  
  6. var ID=$(this).attr('id');  
  7. $("#first_"+ID).hide();  
  8. $("#last_"+ID).hide();  
  9. $("#first_input_"+ID).show();  
  10. $("#last_input_"+ID).show();  
  11. }).change(function()  
  12. {  
  13. var ID=$(this).attr('id');  
  14. var first=$("#first_input_"+ID).val();  
  15. var last=$("#last_input_"+ID).val();  
  16. var dataString = 'id='+ ID +'&content='+first+'&text='+last;  
  17. $("#first_"+ID).html('<img src="load.gif" />');  
  18.   
  19.   
  20. if(first.length && last.length>0)  
  21. {  
  22. $.ajax({  
  23. type: "POST",  
  24. url: "table_edit_ajax.php",  
  25. data: dataString,  
  26. cache: false,  
  27. success: function(html)  
  28. {  
  29.   
  30. $("#first_"+ID).html(first);  
  31. $("#last_"+ID).html(last);  
  32. }  
  33. });  
  34. }  
  35. else  
  36. {  
  37. alert('不能为空.');  
  38. }  
  39.   
  40. });  
  41.   
  42. $(".editbox").mouseup(function()   
  43. {  
  44. return false  
  45. });  
  46.   
  47. $(document).mouseup(function()  
  48. {  
  49. $(".editbox").hide();  
  50. $(".text").show();  
  51. });  
  52.   
  53. });  
  54. </script>  

 table_edit_ajax.php

 

PHP Code
  1. <?php  
  2. include_once('conn.php');  
  3. if($_POST['id'])  
  4. {  
  5. $id=mysql_escape_String($_POST['id']);  
  6. $content=mysql_escape_String($_POST['content']);  
  7. $text=mysql_escape_String($_POST['text']);  
  8. $sql = "update add_delete_record set content='$content',text='$text' where id='$id'";  
  9. mysql_query($sql);  
  10. }  
  11. ?>  

 


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