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

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

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

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

PHP Code

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. <Tr bgcolor="#eeeeee">
11. <Td><?php echo $row['id']?></Td>
12. <Td class="bigclassname" ><span title="点击修改"><?php echo $row['text']?></span></Td>
13. </Tr>
14. <?php
15. }
16. while ($row = mysql_fetch_array($rs));
17. }?>
18. </table>

JavaScript Code

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

演示演示