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

在IE下获取object（ActiveX）的Param的代码

Sep 15 Javascript

javascript+xml实现简单图片轮换(只支持IE)

Dec 23 Javascript

jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

Apr 07 Javascript

jquery监听div内容的变化具体实现思路

Nov 04 Javascript

jquery制作漂亮的弹出层提示消息特效

Dec 23 Javascript

webpack入门+react环境配置

Feb 08 Javascript

JavaScript中清空数组的三种方式

Mar 22 Javascript

详解如何去除vue项目中的#——History模式

Oct 13 Javascript

Angular2整合其他插件的方法

Jan 20 Javascript

Canvas实现微信红包照片效果

Aug 21 Javascript

基于Vue的侧边目录组件的实现

Feb 05 Javascript

JS实现表单中点击小眼睛显示隐藏密码框中的密码

Apr 13 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

laravel 5 实现模板主题功能

2015/03/02 PHP

Symfony控制层深入详解

2016/03/17 PHP

JQUERY THICKBOX弹出层插件

2008/08/30 Javascript

JS 巧妙获取剪贴板数据 Excel数据的粘贴

2009/07/09 Javascript

javascript 检测浏览器类型和版本的代码

2009/09/15 Javascript

从零开始学习jQuery (六) jquery中的AJAX使用

2011/02/23 Javascript

ajax中get和post的说明及使用与区别

2012/12/23 Javascript

jQuery ReferenceError: $ is not defined 错误的处理办法

2013/05/10 Javascript

javascript中负数算术右移、逻辑右移的奥秘探索

2013/10/17 Javascript

浅析Cookie中的Path与domain

2013/12/18 Javascript

微信小程序加载 app-service.js 错误解决方法

2016/10/12 Javascript

JS实现按钮控制计时开始和停止功能

2017/07/27 Javascript

js表单序列化判断空值的实例

2017/09/22 Javascript

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

2020/01/19 Javascript

javascript设计模式 ? 外观模式原理与用法实例分析

2020/04/15 Javascript

[01:07:02]DOTA2-DPC中国联赛正赛 iG vs PSG.LGD BO3 第三场 2月26日

2021/03/11 DOTA

python检测服务器是否正常

2014/02/16 Python

Selenium（Python web测试工具）基本用法详解

2018/08/10 Python

Pytorch 实现计算分类器准确率(总分类及子分类)

2020/01/18 Python

Python sql注入过滤字符串的非法字符实例

2020/04/03 Python

Windows 下更改 jupyterlab 默认启动位置的教程详解

2020/05/18 Python

python实现批处理文件

2020/07/28 Python

html5 button autofocus 属性介绍及应用

2013/01/04 HTML / CSS

Javascript如何发送一个Ajax请求

2015/01/26 面试题

同步和异步有何异同，在什么情况下分别使用他们？

2012/12/28 面试题

领班岗位职责范文

2014/02/06 职场文书

军训自我鉴定怎么写

2014/02/13 职场文书

小学生开学感言

2014/02/28 职场文书

金融专业毕业生自荐信

2014/06/26 职场文书

幼儿园教师节演讲稿

2014/09/03 职场文书

科学育儿宣传标语

2014/10/08 职场文书

乐山大佛导游词

2015/02/02 职场文书

亮剑观后感600字

2015/06/05 职场文书

2016党员学习心得体会范文

2016/01/23 职场文书

民政局2016年“六一”儿童节慰问活动总结

2016/04/06 职场文书

导游词之苏州阳澄湖

2019/11/15 职场文书