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的级联操作 ...
随机推荐
- inet_addr() inet_ntoa() inet_pton inet_ntop sockaddr_in
inet_addr() 简述:将一个点间隔地址转换成一个in_addr.#include <winsock.h>unsigned long PASCAL FAR inet_addr( co ...
- bzoj 1901: Zju2112 Dynamic Rankings(树套树)
1901: Zju2112 Dynamic Rankings 经典的带改动求区间第k小值问题 树套树模板,我是用的线段树套splay实现的,并且用的数组模拟的,所以可能空间略大,bzoj过了,zoj过 ...
- meanShift算法介绍
meanShift,均值漂移,在聚类.图像平滑.切割.跟踪等方面有着广泛的应用.meanShift这个概念最早是由Fukunage在1975年提出的,其最初的含义正如其名:偏移的均值向量:但随着理论的 ...
- 记一次在Tomcat部署项目后无法启动该项目的例子
在一次正常部署后,发现在Tomcat的管理中无法将该项目启动起来,并在Tomcat的日志文件localhost.log中发现以下错误信息: java.lang.NoSuchMethodError: o ...
- forEach嵌套循环的问题
程序中: List firstList = ; i<firstList.size(); i++) { List secondListList = request.setAttribute(&qu ...
- linux-0.11抠代码-bootsect
//bootfun.s .global asm_message .global asm_memmove .global asm_readsector .global asm_checkLBA .cod ...
- java假设模拟请求重新启动路由器(网络爬虫经常使用)，还有java怎样下载图片
我们假设在公司或家里使用网络爬虫去抓取自己索要的一些数据的时候,经常对方的站点有defence机制,会给你的http请求返回500错误,仅仅要是同样IP就请求不到数据,这时候我们仅仅能去重新启动路由器 ...
- 黑马程序猿_Objective C 类与协议
<a href="http://www.itheima.com"target="blank">ASP.Net+Unity开发</a>.& ...
- MSSQL - 因为数据库正在使用，所以无法获得对数据库的独占访问权。
关于“因为数据库正在使用,所以无法获得对数据库的独占访问权”的最终解决方案 今天在使用SQL Server2005对某个数据库进行还原操作的时候,出现了如上问题,“因为数据库正在使用,所以无法获得 ...
- Java+7入门经典 - 6 扩展类与继承 Part 1/2
第6章 扩展类与继承 面向对象编程的一个重要特性: 允许基于已定义的类创建新的类; 6.1 使用已有的类 派生 derivation, 派生类 derived class, 直接子类 direct s ...