jquery 点击报表变为input可以修改无刷新更新数据

jquery 点击表格变为input可以修改无刷新更新数据

?之前已经发了2篇类似的文章《点击变td为input更新》和《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》

这篇功能是一样的，不过实用性可能比不上前面的文章

?

?

?

1. <table>??
2. <Tr><Td?colspan="2">如果本例看不到数据请先添加一条记录,点击<a?href="?action=add">这里可以添加</a></Td></Tr>??
3. <?php??
4. $sql="select?*?from?`add_delete_record`?where?id>0";??
5. $rs=mysql_query($sql);??
6. if?($row?=?mysql_fetch_array($rs))??
7. {??
8. ????do?{??
9. ?>??
10. ??
11. <Tr?bgcolor="#eeeeee">??
12. <Td><?php?echo?$row['id']?></Td>??
13. <Td?class="bigclassname"?><span?title="点击修改"><?php?echo?$row['text']?></span></Td>??
14. </Tr>??
15. <?php???
16. ????}??
17. ??????
18. ????while?($row?=?mysql_fetch_array($rs));??
19. }?>??
20. </table>??

1. <script>??
2. /**//*??
3. *?说明：用Jquery的方法，无刷新页面，编辑表格??
4. */???
5. ??
6. $(function()?{???
7. //给页面中有bigclassname类的标签上加上click函数???
8. $(".bigclassname").click(function()?{???
9. ??
10. var?objTD?=?$(this);???
11. ??
12. //先将老的类别名称保存起来,并用trim方法去掉左右多余的空格???
13. var?oldText?=?$.trim(objTD.text());???
14. ??
15. //构造一个input的标签对象（作用是为了让这个input失效，不然点击多次后，文字会消失）???
16. var?input?=?$("<input?type='text'?value='"?+?oldText?+?"'?/>");???
17. ??
18. //当前td的内容变为文本框，并且把老类别名放进去???
19. objTD.html(input);???
20. ??
21. //设置文本框的点击事件失效???
22. input.click(function()?{???
23. return?false;???
24. });???
25. ??
26. //设置文本框样式，让界面显示的人性化点???
27. input.css("font-size",?"16px");???
28. input.css("text-align",?"center");???
29. input.css("background-color",?"#ffffff");???
30. input.width("120px");???
31. ??
32. //自动选中文本框中的文字???
33. input.select();???
34. ??
35. //文本框失去焦点时重新变为文本???
36. input.blur(function()?{???
37. ??
38. //获得新输入的类别名???
39. var?newText?=?$(this).val();???
40. ??
41. //用新的类别名文字替换之前变过来的输入框状态???
42. objTD.html(newText);???
43. ??
44. //获取该类别名所对应的ID(bigclassid)???
45. var?bigclassid?=?objTD.prev().text();???
46. ??
47. //将新的类别名进行转码，不然界面以及数据库显示的都是"???"这样的乱码???
48. newText?=?escape(newText);???
49. ??
50. //获取要传到"一般处理文件"(update_bigclassname_2.php)中的URL???
51. var?url?=?"update.php?id="?+?bigclassid?+?"&bigclassname="?+?newText;???
52. ??
53. //AJAX异步更改数据库,data为成功后的回调返回值，用于显示提示信息???
54. $.get(url,?function(data)?{});???
55. ??
56. });???
57. });???
58. });???
59. </script>??

?

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