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

javascript SocialHistory 检查访问者是否访问过某站点

Aug 02 Javascript

解javascript 混淆加密收藏

Jan 16 Javascript

javascript学习笔记（四）function函数部分

Sep 30 Javascript

浅谈JavaScript中面向对象的的深拷贝和浅拷贝

Aug 01 Javascript

BootStrap selectpicker后台动态绑定数据

Jun 01 Javascript

angularJS利用ng-repeat遍历二维数组的实例代码

Jun 03 Javascript

基于vue-cli 打包时抽离项目相关配置文件详解

Mar 07 Javascript

原生JS实现的碰撞检测功能示例

May 18 Javascript

微信小程序中显示倒计时代码实例

May 09 Javascript

vue+element 模态框表格形式的可编辑表单实现

Jun 07 Javascript

Node.js API详解之 module模块用法实例分析

May 13 Javascript

javascript局部自定义鼠标右键菜单

Dec 08 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

在DC的漫画和电影中，蝙蝠侠的宿敌，小丑的真名是什么？

2020/04/09 欧美动漫

PHP的array_diff()函数在处理大数组时的效率问题

2011/11/27 PHP

使用PHP计算两个路径的相对路径

2013/06/14 PHP

限制ckeditor上传图片文件大小的方法

2013/11/15 PHP

destoon实现资讯信息前面调用它所属分类的方法

2014/07/15 PHP

PHP实现合并两个排序链表的方法

2018/01/19 PHP

filemanage功能中用到的common.js

2007/04/08 Javascript

ExtJs扩展之GroupPropertyGrid代码

2010/03/05 Javascript

js中格式化日期时间型数据函数代码

2010/11/08 Javascript

关于js中for in的缺陷浅析

2013/12/02 Javascript

加载列表时jquery获取ul中第一个li的属性

2014/11/02 Javascript

深入浅析同源策略和跨域访问

2015/11/26 Javascript

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

2016/09/02 Javascript

Jquery Easyui选项卡组件Tab使用详解（10）

2016/12/18 Javascript

js手机号4位显示空格，银行卡每4位显示空格效果

2017/03/23 Javascript

Vue项目中如何使用Axios封装http请求详解

2019/10/23 Javascript

在vue中使用vuex,修改state的值示例

2019/11/08 Javascript

vue使用nprogress实现进度条

2019/12/09 Javascript

[01:52]2020年DOTA2 TI10夏季活动预告片

2020/07/15 DOTA

[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29

2020/12/02 DOTA

Python迭代用法实例教程

2014/09/08 Python

跟老齐学Python之玩转字符串(2)

2014/09/14 Python

python按综合、销量排序抓取100页的淘宝商品列表信息

2018/02/24 Python

python3.7 sys模块的具体使用

2019/07/22 Python

用Python写一个自动木马程序

2019/09/17 Python

HTML5中的postMessage API基本使用教程

2016/05/20 HTML / CSS

使用css3 属性如何丰富图片样式(圆角阴影渐变)

2012/11/22 HTML / CSS

娇韵诗法国官网：Clarins法国

2019/01/29 全球购物

数组越界问题

2015/10/21 面试题

什么是网络协议

2016/04/07 面试题

几个常见的消息中间件(MOM)

2014/01/08 面试题

数据员岗位职责

2013/11/19 职场文书

电子信息专业自荐书

2014/02/04 职场文书

2014年世界艾滋病日宣传活动总结

2014/11/18 职场文书

一道JS算法面试题——冒泡、选择排序

2021/04/21 Javascript

用Python生成会跳舞的美女

2022/01/18 Python