jquery报表可编辑修改表格里面的值,点击td变input无刷新更新表格

jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

td点击后变为input可以输入,更新数据,无刷新更新

1. <table border="0" cellpadding="0" cellspacing="0">    
2.             
3.             <tr>    
4.                 <th><a href="http://www.freejs.net">freejs.net演示</a></td>    
5.                 <th scope="col">列1</th>    
6.                 <th scope="col">第二列</th>    
7.                 <th scope="col">其他</th>    
8.             </tr>    
9.         <tbody>    
10. <?php    
11. require "conn.php";    
12.    
13.     
14. $sql="select * from `add_delete_record` where id>0";    
15. $rs=mysql_query($sql);    
16. if ($row = mysql_fetch_array($rs))    
17. {    
18.     do {    
19. ?>    
20.     
21.   <tr>    
22.                 <th><?php echo $row['id']?></th>    
23.                 <td class="content"><?php echo $row['content']?></td>    
24.                 <td class="text"><?php echo $row['text']?></td>    
25.                 <td class="position"><?php echo $row['position']?></td>    
26.             </tr>    
27. </Tr>    
28. <?php     
29.     }    
30.         
31.     while ($row = mysql_fetch_array($rs));    
32. }?>    
33.                
34.         </tbody>    
35.     </table>        
36. 注意:5个字符以上数据库不能添加    
37.     
38. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>    
39. <script type="text/javascript">    
40. $(function(){        
41.     
42.     $('table td').click(function(){    
43.         if(!$(this).is('.input')){    
44.             $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){    
45.                 var thisid = $(this).parent().siblings("th:eq(0)").text();    
46.                 var thisvalue=$(this).val();    
47.                 var thisclass = $(this).parent().attr("class");      
48.                  
49.                 $.ajax({    
50.                   type: 'POST',    
51.                   url: 'update.php',    
52.                   data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue    
53.                 });    
54.                 $(this).parent().removeClass('input').html($(this).val() || 0);    
55.             });                        
56.         }    
57.     }).hover(function(){    
58.         $(this).addClass('hover');    
59.     },function(){    
60.         $(this).removeClass('hover');    
61.     });    
62.     
63. });    
64. </script>    

 update.php

1. <?php  
2. require "conn.php";  
3. $id = trim($_REQUEST['thisid']);  
4. $thisclass = trim($_REQUEST['thisclass']);  
5. $thisvalue= trim($_REQUEST['thisvalue']);  
6. if (substr_count($thisclass," ")>0){  
7. $thisclass=str_replace(" ","",$thisclass);  
8. }  
9. if (substr_count($thisclass,"input")>0){  
10. $thisclass=str_replace("input","",$thisclass);  
11. }  
12. $update_sql = "update add_delete_record set $thisclass='$thisvalue' where id='$id'";  
13. $result = mysql_query($update_sql);  
14. ?>