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

    基于Qt开发的应用程序进驻Mac App Store 最近摸索着将一个基于用Qt开发的App发布到Mac App Store,在网上查找相关资料的时候,发现很多文档都过期了,要有一些修改,所以想记录下 ...

  2. 获取操作系统版本Asp.Net

    /// <summary> /// 获取操作系统版本号 /// </summary> /// <returns></returns> public st ...

  3. 利用git下载skia库

    1.准备好cygwin或者gitbash(github下载) 2.进入进入https://android.googlesource.com/,搜索skia,进入. 3.进入后最上面会显示下载方法:gi ...

  4. 趋势科技4月移动client病毒报告

    2014年4月移动client安全威胁概况 截至2014年4月30日,中国区移动client病毒码1.669.60,大小9,792,484字节,能够检測病毒约221万个.移动client病毒约12万个 ...

  5. ARMv8 Linux内核源代码分析：__flush_dcache_all()

    1.1 /* *  __flush_dcache_all() *  Flush the wholeD-cache. * Corrupted registers: x0-x7, x9-x11 */ EN ...

  6. paip.按键替换映射总结

    paip.按键替换映射总结 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/attilax 因为 ...

  7. Join的实现步骤 以及连接的概念

    Join的实现步骤  以及连接的概念 我们常说连接有三种,即 交叉连接.内连接.外连接,这三者的概念很容易模糊,现在我们先放下概念,搞清楚完整连接实现的步骤: 一个完整的连接有三个步骤:.做笛卡儿积: ...

  8. TImage也有OnClick事件，可以当按钮使用，配上合适的图片（背景透明，效果前凸）更是几乎以假乱真

    本质上TImage与TSpeedButton没有什么区别,都是没有句柄的,但都可以执行OnClick事件.有空分析一下.

  9. Ajax Post提交事例及SpringMVC注解@RequestMapping取不到参数值解决办法

    var xmlHttp; //定义变量,用来创建xmlHttp对象 function ajaxfunction(url,onreadystatechangMethod,param){ // 创建xml ...

  10. 使用 jackson序列格式化日期

    [1]自定义时间,序列化类 [java] view plaincopy package com.fsti.bm.utils; import java.io.IOException; import ja ...