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

    一. foreach循环用于列举出集合中所有的元素,foreach语句中的表达式由关键字in隔开的两个项组成.in右边的项是集合名,in左边的项是变量名,用来存放该集合中的每个元素.      该循环 ...

  2. javascript每日一练（六）——事件一

    一.event对象 var oEvent = ev || event;//获取事件对象 oEvent.clientX oEvent.clientY//获取鼠标坐标 oEvent.cancelBubbl ...

  3. JVM参数说明（转）

    做了这么多年java,自以为算是熟悉,其实还差得远,啥也别说了,还是踏踏实实地学吧.今天总结一下常用的JVM的启动参数. 参数类别 参数项 说明 标准参数(-,所有的JVM实现都必须实现这些参数的功能 ...

  4. c语言实现atoi和itoa函数。

    首先看atoi函数: C语言库函数名: atoi 功 能: 把字符串转换成整型数. 名字来源:ASCII to integer 的缩写. 原型: int atoi(const char *nptr); ...

  5. Windows Azure 社区新闻综述（#78 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 博客文章: 博客:Windows Azure BizTalk 服务:如何开 ...

  6. QObject，有一个生存线程（慢慢体会）

     moveToThread本来就是操作QObject的    比如把当前对象移到主线程里: myObject->moveToThread(QApplication::instance()-> ...

  7. 不用SWIG，Go使用C++代码的方式

    将C++代码用C作一次封装,就可以让Go调用了. 这是一个C++头文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #ifndef CGO_CPPGO_C ...

  8. 如何把 excel 的数据导入到数据库里面去

    1. 把 excel 另存为 .csv 格式 2. 用 Notepad 打开 .csv 文件, 第一行就是全部的字段 3. 创建表结构 create table yu_rt_01 as select ...

  9. 【linux】linux根文件系统制作

    欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...

  10. Qt多工程多目录的编译案例

    源地址:http://blog.csdn.net/libaineu2004/article/details/23625441 写这篇文章的目的是为了让Qt像VC++那样,支持一个工程包含多个项目.即1 ...