基于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 三击事件实现代码
Sep 11 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js实现日期级联效果
Jan 23 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
vue 如何使用递归组件
Oct 23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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 ios推送(代码)
2013/07/01 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php基本函数汇总
2015/07/09 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
window.open的功能全解析
2006/10/10 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue中监听返回键问题
2019/08/28 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
详解python的数字类型变量与其方法
2016/11/20 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
高二物理教学反思
2014/02/08 职场文书
八一建军节感言
2014/02/28 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书