jQuery实现可编辑表格

时间：2023-03-08 17:33:22

在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上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. }

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

相关文章