编程 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 内存释放问题

Apr 25 Javascript

JavaScript高级程序设计客户端存储学习笔记

Sep 10 Javascript

express的中间件bodyParser详解

Dec 04 Javascript

javascript批量修改文件编码格式的方法

Jan 27 Javascript

js验证上传图片的方法

May 12 Javascript

微信小程序教程之事件

Oct 18 Javascript

AngularJS实现自定义指令与控制器数据交互的方法示例

Jun 19 Javascript

vue-cli + sass 的正确打开方式图文详解

Oct 27 Javascript

jQuery EasyUI window窗口使用实例代码

Dec 25 jQuery

浅谈vue中.vue文件解析流程

Apr 24 Javascript

vue 中动态绑定class 和 style的方法代码详解

Jun 01 Javascript

详解webpack打包第三方类库的正确姿势

Oct 20 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 的几个配置文件函数

2006/12/21 PHP

PHP中使用CURL伪造来路抓取页面或文件

2011/05/04 PHP

php中\r \r\n \t的区别示例介绍

2014/02/08 PHP

php获得文件大小和文件创建时间的方法

2015/03/13 PHP

自制PHP框架之模型与数据库

2017/05/07 PHP

JavaScript类库D

2010/10/24 Javascript

一个封装js代码-----展开收起效果示例

2013/07/03 Javascript

jQuery模拟点击A标记示例参考

2014/04/17 Javascript

通过$(this)使用jQuery包装后的方法或属性

2014/05/18 Javascript

jquery让返回的内容显示在特定div里(代码少而精悍)

2014/06/23 Javascript

jQuery实现获取绑定自定义事件元素的方法

2015/12/02 Javascript

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

2016/05/16 Javascript

jQuery zTree树插件简单使用教程

2017/01/10 Javascript

AngularJS 打开新的标签页实现代码

2017/09/07 Javascript

小程序实现自定义导航栏适配完美版

2019/04/02 Javascript

微信小程序版本自动更新的方法

2019/06/14 Javascript

layui 中select下拉change事件失效的解决方法

2019/09/20 Javascript

JS数组splice操作实例分析

2019/10/12 Javascript

Python打印scrapy蜘蛛抓取树结构的方法

2015/04/08 Python

在Python下使用Txt2Html实现网页过滤代理的教程

2015/04/11 Python

横向对比分析Python解析XML的四种方式

2016/03/30 Python

使用python3.5仿微软记事本notepad

2016/06/15 Python

使用Python对Excel进行读写操作

2017/03/30 Python

使用python的pandas为你的股票绘制趋势图

2019/06/26 Python

python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例

2020/02/27 Python

Python性能测试工具Locust安装及使用

2020/12/01 Python

澳大利亚最早和最古老的巨型游戏专家：Yardgames

2020/02/20 全球购物

linux面试相关问题

2012/08/11 面试题

高中政治教学反思

2014/01/18 职场文书

美发店5.1活动方案

2014/01/24 职场文书

硕士研究生就业推荐信

2014/05/18 职场文书

优秀工会工作者事迹材料

2014/06/02 职场文书

演讲比赛的活动方案

2014/08/28 职场文书

2017年寒假少先队活动总结

2016/04/06 职场文书

如何给HttpServletRequest增加消息头

2021/06/30 Java/Android

MySQL下载安装配置详细教程附下载资源

2022/09/23 MySQL