jQuery实现可编辑表格

在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我

们就jQuery来说明一下可编辑表格的实现步骤

首先是HTML代码，非常简单

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>
3. <head>
4. <title>可以编辑的表格</title>
5. <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
6. <script type="text/javascript" src="/Ajax/js/edit.js"></script>
7. <link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link>
8. </head>
9. <body>
10. <table border="1px">
11. <tr>
12. <td>123123</td>    <td>456456</td>
13. </tr>
14. </table>
15. </body>
16. </html>

然后是js代码

1. $(function(){
2. //找到所有的td节点
3. $("td").click(tdclick);
4. });
5. function tdclick(){
6. var td = $(this);
7. //1.取出当前的文本内容并且保存起来
8. var text = td.text();
9. //2. 清除当前的td内容
10. td.html("");//也可以用empty()方法
11. //3.建立一个input标签
12. var input = $("<input>");
13. //4.设置文本框里面的值是改写后的内容
14. input.attr("value",text);
15. //4.5响应键盘事件，处理回车
16. input.keyup(function(event){
17. //1.判断是否回车按下
18. //结局不同浏览器获取时间的差异
19. var myEvent = event || window.event;
20. var key = myEvent.keyCode;
21. if(key == 13){
22. var inputNode = $(this);
23. //1.保存当前文本框的内容
24. var inputText = inputNode.val();
25. //2.清空td里面的内容
26. inputNode.parent().html(inputText);
27. td.click(tdclick);
28. }
29. });
30. input.blur(function(){
31. var inputNode = $(this);
32. var inputText = inputNode.val();
33. inputNode.parent().html(inputText);
34. td.click(tdclick);
35. });
36. //5.把文本框就加入到td里面去
37. td.append(input);
38. //6.需要清除td上面的点击事件
39. //6.5高亮数据
40. td.unbind("click");
41. //7.提取文本框里面的值
42. }

注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存