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

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

演示

XML/HTML Code

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

update.php

PHP Code

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. ?>

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