jQuery实现可编辑表格
在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我
们就jQuery来说明一下可编辑表格的实现步骤
首先是HTML代码，非常简单
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>可以编辑的表格</title>
- <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
- <script type="text/javascript" src="/Ajax/js/edit.js"></script>
- <link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link>
- </head>
- <body>
- <table border="1px">
- <tr>
- <td>123123</td> <td>456456</td>
- </tr>
- </table>
- </body>
- </html>
然后是js代码
- $(function(){
- //找到所有的td节点
- $("td").click(tdclick);
- });
- function tdclick(){
- var td = $(this);
- //1.取出当前的文本内容并且保存起来
- var text = td.text();
- //2. 清除当前的td内容
- td.html("");//也可以用empty()方法
- //3.建立一个input标签
- var input = $("<input>");
- //4.设置文本框里面的值是改写后的内容
- input.attr("value",text);
- //4.5响应键盘事件，处理回车
- input.keyup(function(event){
- //1.判断是否回车按下
- //结局不同浏览器获取时间的差异
- var myEvent = event || window.event;
- var key = myEvent.keyCode;
- if(key == 13){
- var inputNode = $(this);
- //1.保存当前文本框的内容
- var inputText = inputNode.val();
- //2.清空td里面的内容
- inputNode.parent().html(inputText);
- td.click(tdclick);
- }
- });
- input.blur(function(){
- var inputNode = $(this);
- var inputText = inputNode.val();
- inputNode.parent().html(inputText);
- td.click(tdclick);
- });
- //5.把文本框就加入到td里面去
- td.append(input);
- //6.需要清除td上面的点击事件
- //6.5高亮数据
- td.unbind("click");
- //7.提取文本框里面的值
- }
注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存
jQuery实现可编辑表格的更多相关文章
- JQuery实战--可以编辑的表格
廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...
- JQuery实战--能够编辑的表格
廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、
脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细
阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...
- LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...
- 老男孩Day17作业：后台管理平台编辑表格
一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
随机推荐
- 【转载】CentOS日志系统组成详解
日志系统有三部分组成:一.使用什么工具记录系统产生的日志信息? syslog服务脚本管理的两个进程: syslogd.klogd 来记录系统产生的日志信息: klogd 进 ...
- java--内部类访问final成员
局部类只能访问外包方法中的final成员.位于方法内部的局部类,可以访问局部类之外,外包方法之内的所以变量和方法,但是生命周期不同,延长生命周期的办法就是将变量设置为final类型. 1)从程序设计语 ...
- QTableWidget 导出到csv表格
跳槽到了新的公司,开始苦逼的出差现场开发,接触到了新的应用.有很多应用需要将Table导出成表格,可以把table导出成csv格式的文件.跟大伙分享一下: lass TableToExcle : pu ...
- cocos2d-x游戏开发系列教程-中国象棋00-前言
象棋描述 在说代码之前,我们先让象棋效果登场,以方便大家对代码的理解 欢迎界面 中国象棋程序,运行起来的第一个界面是一个欢迎界面,该欢迎界面在停留一秒后进入游戏界面 游戏主界面 新局:所有棋子归位,状 ...
- 在Myeclipse中安装java Decompiler
由于在myeclipse中的Help选项中没有Install New Software,所以在eclipse中安装插件的方法并不适应于Myeclipse,但是我们可以通过点击Windows->P ...
- Linux的inode的理解 [转]
Linux的inode的理解 [转] 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存51 ...
- VPN指定某个程序，其实是改路由表（赛风支持VPN和SSH和SSH+模式）
其实就是使用IE代理的意思,方法有很多.最简单的就是读取注册表中的代理信息.具体找;\Software\Microsoft\Windows\CurrentVersion\Internet Settin ...
- WM_PAINT消息详解，使用InvalidateRect或InvalidateRgn函数刻意产生WM_PAINT消息（WIN7里有变化，“调整视觉效果”，将“启用桌面组合”去掉）
什么时候会触发WM_PAINT消息消息呢? 以下内容来自大名鼎鼎的<Windows程序设计(第五版)> 大多数Windows程序在WinMain中进入消息循环之前的初始化期间都要呼叫函数U ...
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
- MSSQL - SqlDataAdapter连接数据库提高性能用法
SqlDataAdapter 与 SqlConnection 和 SqlCommand 一起使用,以便在连接到 SQL Server 数据库时提高性能. SqlDataAdapter 的这一实现自动打 ...