编程 Javascript

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

Posted in Javascript onJanuary 09, 2011

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

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

这种方式会出现一个问题，就是页面显示的时候有点慢，同时如果有滚动条的话，会有些卡。下面给出我的一个解决方法，显示的时候全是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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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 职场文书