基于jquery的高性能td和input切换并可修改内容实现代码


Posted in Javascript onJanuary 09, 2011

在之前的基础上,添加方向键左右支持。

在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下,

 

基于jquery的高性能td和input切换并可修改内容实现代码

这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡。下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下

基于jquery的高性能td和input切换并可修改内容实现代码

 当你点击其中一个td时,就会出现下面这样

基于jquery的高性能td和input切换并可修改内容实现代码

当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td。同时支持回车,上下方向键,进行向右,上下移动。

可以对这个做一些扩展,做出一些很实际的功能,(对大批量数据编辑等等)。不多说了,附上源码,仅供参考。
在线演示地址http://demo.3water.com/js/td_input_edit/index.htm
打包下载地址http://xiazai.3water.com/201101/yuanma/td_input_edit.rar

Javascript 相关文章推荐
js操作iframe父子窗体示例
May 22 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 #Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 #Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 #Javascript
jquery的extend和fn.extend的使用说明
Jan 09 #Javascript
js对象之JS入门之Array对象操作小结
Jan 09 #Javascript
理解JavaScript中的对象 推荐
Jan 09 #Javascript
最佳JS代码编写的14条技巧
Jan 09 #Javascript
You might like
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
js控制frameSet示例
2013/09/10 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python处理csv中的空值方法
2018/06/22 Python
社会实践感言
2014/01/25 职场文书
电气个人求职信范文
2014/02/04 职场文书
三年级学生评语
2014/04/23 职场文书
社团活动总结报告
2014/06/27 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
初中思品教学反思
2016/02/20 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python