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

非常漂亮的JS+CSS图片幻灯切换特效

Nov 20 Javascript

JavaScript中的console.group()函数详细介绍

Dec 29 Javascript

JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

Feb 13 Javascript

BootStrap下拉框在firefox浏览器界面不友好的解决方案

Aug 18 Javascript

微信小程序在Chrome浏览器上运行以及WebStorm的使用

Sep 27 Javascript

Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

Feb 17 Javascript

AngularJS中下拉框的基本用法示例

Oct 11 Javascript

js循环map 获取所有的key和value的实现代码(json)

May 09 Javascript

小程序实现人脸识别功能(百度ai)

Dec 23 Javascript

vue单页面在微信下只能分享落地页的解决方案

Apr 15 Javascript

vue移动端模态框(可传参)的实现

Nov 20 Javascript

Vue 实现拨打电话操作

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

php中time()与$_SERVER[REQUEST_TIME]用法区别

2014/11/19 PHP

反射调用private方法实践(php、java)

2015/12/21 PHP

PHP实现创建微信自定义菜单的方法示例

2017/07/14 PHP

PHP curl批处理及多请求并发实现方法分析

2018/08/15 PHP

JQuery 无废话系列教程(一) jquery入门 [推荐]

2009/06/23 Javascript

JS实现商品倒计时实现代码

2013/05/03 Javascript

JQuery实现点击div以外的位置隐藏该div窗口

2013/09/13 Javascript

js中对象的声明方式以及数组的一些用法示例

2013/12/11 Javascript

JavaScript判断前缀、后缀是否是空格的方法

2015/04/15 Javascript

javascript中DOM复选框选择用法实例

2015/05/14 Javascript

JS+DIV+CSS实现仿表单下拉列表效果

2015/08/18 Javascript

JavaScript测试工具之Karma-Jasmine的安装和使用详解

2015/12/03 Javascript

jQuery实现侧浮窗与中浮窗切换效果的方法

2016/09/05 Javascript

jQuery版AJAX简易封装代码

2016/09/14 Javascript

详解javascript事件绑定使用方法

2016/10/20 Javascript

vue 插值 v-once,v-text, v-html详解

2018/01/19 Javascript

Vue 中文本内容超出规定行数后展开收起的处理的实现方法

2019/04/28 Javascript

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

2019/09/24 Javascript

JavaScript实现动态留言板

2020/03/16 Javascript

[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局

2016/02/28 DOTA

[01:05:56]2018DOTA2亚洲邀请赛3月29日小组赛A组 Newbee VS VG

2018/03/30 DOTA

python根据文件大小打log日志

2014/10/09 Python

利用Psyco提升Python运行速度

2014/12/24 Python

Tensorflow 训练自己的数据集将数据直接导入到内存

2018/06/19 Python

浅谈python 导入模块和解决文件句柄找不到问题

2018/12/15 Python

Python中的Socket 与 ScoketServer 通信及遇到问题解决方法

2019/04/01 Python

利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统

2019/09/25 Python

在python中修改.properties文件的操作

2020/04/08 Python

Burberry英国官网：英国标志性奢侈品牌

2017/03/29 全球购物

加拿大建筑和装修专家：Reno-Depot

2017/12/21 全球购物

Hudson Jeans官网：高级精制牛仔裤

2018/11/28 全球购物

心理健康心得体会

2014/01/02 职场文书

汽车专业大学生职业生涯规划范文

2014/01/07 职场文书

厉行节约工作总结

2015/08/12 职场文书

Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高

2021/08/23 MySQL

mysql字段为NULL索引是否会失效实例详解

2022/05/30 MySQL