编程 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 相关文章推荐

使用jQuery和Bootstrap实现多层、自适应模态窗口

Dec 22 Javascript

jQuery基础知识小结

Dec 22 Javascript

原生js结合html5制作简易的双色子游戏

Mar 30 Javascript

JavaScript使用Math.Min返回两个数中较小数的方法

Apr 06 Javascript

AngularJS入门教程之ng-class 指令用法

Aug 01 Javascript

Angular2内置指令NgFor和NgIf详解

Aug 03 Javascript

switch语句的妙用(必看篇)

Oct 03 Javascript

如何让node运行es6模块文件及其原理详解

Dec 11 Javascript

Vue实现数据表格合并列rowspan效果

Nov 30 Javascript

vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

Nov 13 Javascript

微信小程序实现比较功能的方法汇总(五种方法)

Mar 07 Javascript

基于Echarts图表在div动态切换时不显示的解决方式

Jul 20 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读取ACCESS数据到MYSQL的代码

2011/05/11 PHP

PHP 下载文件时自动添加bom头的方法实例

2014/01/10 PHP

PHP临时文件的安全性分析

2014/07/04 PHP

php post大量数据时发现数据丢失问题解决方法

2015/06/20 PHP

javascript GUID生成器实现代码

2009/10/31 Javascript

Javascript在IE和FireFox中的不同表现简析

2012/12/03 Javascript

5秒后跳转效果(setInterval/SetTimeOut)

2013/05/03 Javascript

JQuery Highcharts 动态生成图表的方法

2013/11/15 Javascript

JavaScript中Null与Undefined的区别解析

2015/06/30 Javascript

JavaScript实现删除,移动和复制文件的方法

2015/08/05 Javascript

Javascript刷新窗口方法小结

2015/10/21 Javascript

JS中innerHTML和pasteHTML的区别实例分析

2016/06/22 Javascript

谈谈对vue响应式数据更新的误解

2017/08/01 Javascript

浅谈vue-router2路由参数注意的问题

2017/11/08 Javascript

详解Angular中通过$location获取地址栏的参数

2018/08/02 Javascript

vue.js 实现点击按钮动态添加li的方法

2018/09/07 Javascript

vue动态注册组件实例代码详解

2019/05/30 Javascript

vue+flask实现视频合成功能(拖拽上传)

2021/03/04 Vue.js

[01:02]2014 DOTA2国际邀请赛中国区预选赛现场抢先看

2014/05/22 DOTA

python和C语言混合编程实例

2014/06/04 Python

python3+dlib实现人脸识别和情绪分析

2018/04/21 Python

python3写的简单本地文件上传服务器实例

2018/06/04 Python

使用Python的Dataframe取两列时间值相差一年的所有行方法

2018/07/10 Python

基于Python在MacOS上安装robotframework-ride

2018/12/28 Python

python pip源配置,pip配置文件存放位置的方法

2019/07/12 Python

Python xlwt模块使用代码实例

2020/06/10 Python

Python 为什么推荐蛇形命名法原因浅析

2020/06/18 Python

PyTorch中clone()、detach()及相关扩展详解

2020/12/09 Python

python 图像增强算法实现详解

2021/01/24 Python

Fossil加拿大官网：化石手表、手袋、首饰及配饰

2019/04/23 全球购物

IGK Hair官网：喷雾、洗发水、护发素等

2020/11/03 全球购物

临床医师个人自我评价

2014/04/06 职场文书

环境工程专业自荐信范文

2014/06/24 职场文书

2014年英语教研组工作总结

2014/12/06 职场文书

三峡导游词

2015/01/31 职场文书

sql查询结果列拼接成逗号分隔的字符串方法

2021/05/25 SQL Server