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的级联操作 ...
随机推荐
- Can't connect to MySQL server on 'XXX' (13)
出现can't connect to MySQL server using '' (13)的错误,结果是 SELinux 不让 httpd 访问外网,一开始还以为是iptables造成的,关闭之后发现 ...
- 黑龙江省第七届大学生程序设计竞赛-Mysterious Organization
描述 GFW had intercepted billions of illegal links successfully. It has much more effect. Today, GFW i ...
- BNU Questions and answers
http://www.bnuoj.com/bnuoj/problem_show.php?pid=2490 这个题是先输入一个整数n,说明有几个数据,然后输入n个整数,然后用三个#分开,后面输入整数k, ...
- hdu 2896 病毒侵袭 AC自动机 基础题
病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- POJ 1700 cross river （数学模拟）
...
- EF 简单的 CRUD、分页 代码笔记
添加: static void Main(string[] args) { CCDBEntities ccdbContext = new CCDBEntities( ...
- isotope/masonry 使用jQuery.sortable
function goMasonry() { // if ($container.data('masonry') != undefined) { $container.isotope('destroy ...
- UML建模技术（资料汇总）
其实,我是非常不喜欢,<深入浅出XXX>.<初级入门XXX>,<21天学会XXX>. ... .and so on , 之类的东西的. 好吧,只是得承认,有些还是不 ...
- js遍历对象的数组
遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){ ...
- 代码格式化工具Astyle配置
Astyle是一个很好的代码格式化工具,其他不多说,下面介绍一下我在VS 2010的配置 1. http://sourceforge.net/projects/astyle,这是该插件的网站,下载后把 ...