基于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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
javascript动画浅析
Aug 30 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
vue中实现高德定位功能
Dec 03 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 smarty函数扩展
2010/03/15 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
event.srcElement+表格应用
2006/08/29 Javascript
js继承的实现代码
2010/08/05 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python3生成手写体数字方法
2018/01/30 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
爱心活动计划书
2014/04/26 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
预备党员介绍人意见
2015/06/01 职场文书
2015国庆节宣传语
2015/07/14 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS