基于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 相关文章推荐
JavaScript实现的日期控件具体代码
Nov 18 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
python实现的文件同步服务器实例
2015/06/02 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
文职个人求职信范文
2013/09/23 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
2014年班务工作总结
2014/12/02 职场文书
爱晚亭导游词
2015/02/09 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
初中语文教师研修日志
2015/11/13 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书