编程 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的blockui插件显示弹出层

Apr 14 Javascript

javascript动画浅析

Aug 30 Javascript

使用focus方法让光标默认停留在INPUT框

Jul 29 Javascript

JavaScript对象之深度克隆介绍

Dec 08 Javascript

JQuery调用绑定click事件的3种写法

Mar 28 Javascript

jQuery实现信息提示框(带有圆角框与动画)效果

Aug 07 Javascript

vue.js开发环境安装教程

Mar 17 Javascript

Node.js利用js-xlsx处理Excel文件的方法详解

Jul 05 Javascript

微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

Jan 23 Javascript

解决Vue中父子传值数据丢失问题

Aug 27 Javascript

解决vue 子组件修改父组件传来的props值报错问题

Nov 09 Javascript

vue中实现高德定位功能

Dec 03 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 smarty函数扩展

2010/03/15 PHP

php读取mysql乱码，用set names XXX解决的原理分享

2011/12/29 PHP

linux使用crontab实现PHP执行计划定时任务

2014/05/10 PHP

Adnroid 微信内置浏览器清除缓存

2016/07/11 PHP

PHP利用百度ai实现文本和图片审核

2019/05/08 PHP

event.srcElement+表格应用

2006/08/29 Javascript

js继承的实现代码

2010/08/05 Javascript

jquery实用代码片段集合

2010/08/12 Javascript

script标签的 charset 属性使用说明

2010/12/04 Javascript

firefox浏览器不支持innerText的解决方法

2013/08/07 Javascript

js实现点击图片将图片地址复制到粘贴板的方法

2015/02/16 Javascript

JavaScript返回0-1之间随机数的方法

2015/04/06 Javascript

jquery控制表单输入框显示默认值的方法

2015/05/22 Javascript

JavaScript生成验证码并实现验证功能

2016/09/24 Javascript

H5实现中奖记录逐行滚动切换效果

2017/03/13 Javascript

基于JQuery和原生JavaScript实现网页定位导航特效

2017/04/03 jQuery

手把手教你搭建ES6的开发运行环境

2017/07/11 Javascript

vue.js给动态绑定的radio列表做批量编辑的方法

2018/02/28 Javascript

Node.js readline模块与util模块的使用

2018/03/01 Javascript

在vue项目中使用Jquery-contextmenu插件的步骤讲解

2019/01/27 jQuery

浅谈JavaScript面向对象--继承

2019/03/20 Javascript

JavaScrip如果基于url实现图片下载

2020/07/03 Javascript

[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战

2013/09/13 DOTA

详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别

2017/06/23 Python

Python3生成手写体数字方法

2018/01/30 Python

使用Python自动生成HTML的方法示例

2019/08/06 Python

香港时装购物网站：ZALORA香港

2017/04/23 全球购物

描述JSP和Servlet的区别、共同点、各自应用的范围

2012/10/02 面试题

爱心活动计划书

2014/04/26 职场文书

室内设计专业毕业生求职信

2014/05/02 职场文书

硕士研究生就业推荐信

2014/05/18 职场文书

预备党员介绍人意见

2015/06/01 职场文书

2015国庆节宣传语

2015/07/14 职场文书

观看《筑梦中国》纪录片心得体会

2016/01/18 职场文书

《夜莺的歌声》教学反思

2016/02/22 职场文书

css3实现背景图片半透明内容不透明的方法示例

2021/04/13 HTML / CSS