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

Cookie 注入是怎样产生的

Apr 08 Javascript

javascript 单例/单体模式(Singleton)

Apr 07 Javascript

关闭浏览器输入框自动补齐兼容IE,FF,Chrome等主流浏览器

Feb 11 Javascript

Javascript和Java获取各种form表单信息的简单实例

Feb 14 Javascript

js闭包实例汇总

Nov 09 Javascript

详解Html a标签中href和onclick用法、区别、优先级别

Jan 16 Javascript

基于LayUI分页和LayUI laypage分页的使用示例

Aug 02 Javascript

react native实现往服务器上传网络图片的实例

Aug 07 Javascript

动态Axios的配置步骤详解

Jan 12 Javascript

使用vue-cli编写vue插件的方法

Feb 26 Javascript

快速解决vue-cli不能初始化webpack模板的问题

Mar 20 Javascript

ES2020 新特性(种草)

Jan 12 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生成条形图的方法

2014/12/10 PHP

php中instanceof 与 is_a()区别分析

2015/03/03 PHP

php 把数字转换成汉字的代码

2015/07/21 PHP

PHP封装的非对称加密RSA算法示例

2018/05/28 PHP

Using the TextRange Object

2006/10/14 Javascript

jQuery滚动加载图片效果的实现

2013/03/06 Javascript

jQuery实现类似滑动门切换效果的层切换

2013/09/23 Javascript

多种方法实现load加载完成后把图片一次性显示出来

2014/02/19 Javascript

NodeJS的Promise的用法解析

2016/05/05 NodeJs

火狐和ie下获取javascript 获取event的方法(推荐)

2016/11/26 Javascript

Vue2.0 从零开始_环境搭建操作步骤

2017/06/14 Javascript

javascript将list转换成树状结构的实例

2017/09/08 Javascript

用React-Native+Mobx做一个迷你水果商城APP(附源码)

2017/12/25 Javascript

在SSM框架下用laypage和ajax实现分页和数据交互的方法

2019/09/27 Javascript

浅析python协程相关概念

2018/01/20 Python

详解pytorch 0.4.0迁移指南

2019/06/16 Python

python交易记录链的实现过程详解

2019/07/03 Python

处理Selenium3+python3定位鼠标悬停才显示的元素

2019/07/31 Python

python实现身份证实名认证的方法实例

2019/11/08 Python

python实现拉普拉斯特征图降维示例

2019/11/25 Python

opencv3/C++图像像素操作详解

2019/12/10 Python

详解Python中的分支和循环结构

2020/02/11 Python

Python标准库shutil模块使用方法解析

2020/03/10 Python

selenium框架中driver.close()和driver.quit()关闭浏览器

2020/12/08 Python

整理HTML5中表单的常用属性及新属性

2016/02/19 HTML / CSS

DKNY品牌官网：纽约大都会时尚风格

2016/10/20 全球购物

全球最大的网上自行车商店：Chain Reaction Cycles

2016/12/02 全球购物

北美三大旅游网站之一：Travelocity

2017/08/12 全球购物

C#面试常见问题

2013/02/25 面试题

汽车运用工程毕业生自荐信

2013/10/29 职场文书

高中生活自我鉴定

2014/01/18 职场文书

加拿大探亲邀请信

2014/01/28 职场文书

婚内房产协议书范本

2014/10/02 职场文书

涪陵白鹤梁导游词

2015/02/09 职场文书

军事博物馆观后感

2015/06/05 职场文书

浅谈Go语言多态的实现与interface使用

2021/06/16 Golang