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

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

jQuery实现可编辑表格的更多相关文章

  1. JQuery实战--可以编辑的表格

    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...

  2. JQuery实战--能够编辑的表格

    廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...

  3. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  4. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  5. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  6. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  7. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  8. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  9. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

随机推荐

  1. python 函数形参四种格式

    1:f(a,b) 2:f(a,b=value)有默认值的参数必须在后面 3:f(*a)多个参数直接传进一个元组 4:f(**a)以keys=values 形式给参数,传入转换为字典 def test( ...

  2. 正则表达式引擎的构建——基于编译原理DFA（龙书第三章）——3 计算4个函数

    整个引擎代码在github上,地址为:https://github.com/sun2043430/RegularExpression_Engine.git nullable, firstpos, la ...

  3. [zencart教程]zencart外贸建站仿站交流俱乐部

    [zencart教程]zencart外贸建站仿站交流俱乐部 1.你想自主一天仿做一个精美的zencart 外贸网站; 2.你想自已自主定制精美的psd 图 zencart模板,并把它变成自定义精美 z ...

  4. 【剑指offer】字符串转整数

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/28015693 题目描写叙述: 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函 ...

  5. codeforces 437C The Child and Toy

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  6. Java中StringBuilder的清空方法比較

    StringBuilder 没有提供clear或empty方法. 清空有3种方法: 1)新生成一个,旧的由系统自己主动回收 2)使用delete 3)使用setLength 将三种方法循环1000万次 ...

  7. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  8. Java 异常解决之java.lang.IllegalArgumentException: Comparison method violates its general contract!

    Java 异常解决 在你的代码前加一句 System.setProperty("java.util.Arrays.useLegacyMergeSort", "true&q ...

  9. TCP协议中的计时器

    说明:  本文仅供学习交流.转载请标明出处,欢迎转载! 本文是下面文献相关内容的总结 [1] <TCP/IP具体解释 卷1:协议> [2] <TCP/IP协议族 第4版> [3 ...

  10. linux命令:env

    env | grep DB ~/>env | grep DB KTK_NONDB_LOG=4