编程 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 源码分析笔记(4) Ready函数

Jun 02 Javascript

JavaScript 处理Iframe自适应高度(同或不同域名下)

Mar 29 Javascript

jquery js 重置表单 reset()具体实现代码

Aug 05 Javascript

jQuery中验证表单提交方式及序列化表单内容的实现

Jan 06 Javascript

创建你的第一个AngularJS应用的方法

Jun 16 Javascript

vue 中引用gojs绘制E-R图的方法示例

Aug 24 Javascript

Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)

Oct 28 Javascript

使用mixins实现elementUI表单全局验证的解决方法

Apr 02 Javascript

Node.js折腾记一：读指定文件夹，输出该文件夹的文件树详解

Apr 20 Javascript

微信小程序判断用户是否需要再次授权获取个人信息

Jul 18 Javascript

vue 监听窗口变化对页面部分元素重新渲染操作

Jul 28 Javascript

浅谈Vue使用Cascader级联选择器数据回显中的坑

Oct 31 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

ob_start(),ob_start('ob_gzhandler')使用

2006/12/25 PHP

PHP6 mysql连接方式说明

2009/02/09 PHP

推荐5款跨平台的PHP编辑器

2014/12/25 PHP

asp 的分词实现代码

2007/05/24 Javascript

使用jquery给input和textarea设定ie中的focus

2008/05/29 Javascript

JQuery 1.4 中的Ajax问题

2010/01/23 Javascript

javascript通过class来获取元素实现代码

2013/02/20 Javascript

JS 修改URL参数(实现代码)

2013/07/08 Javascript

jquery 页面滚动到指定DIV实现代码

2013/09/25 Javascript

JavaScript Array对象扩展indexOf()方法

2014/05/09 Javascript

JS函数的几种定义方式分析

2015/12/17 Javascript

CKEditor无法验证的解决方案（js验证+jQuery Validate验证）

2016/05/09 Javascript

jQuery查看选中对象HTML代码的方法

2016/06/17 Javascript

BootStrap selectpicker

2016/06/20 Javascript

NodeJs的优势和适合开发的程序

2016/08/14 NodeJs

AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

2016/11/15 Javascript

Node.js 实现简单小说爬虫实例

2016/11/18 Javascript

深入理解React中何时使用箭头函数

2017/08/23 Javascript

微信小程序之GET请求的实例详解

2017/09/29 Javascript

vue 实现全选全不选的示例代码

2018/03/29 Javascript

[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄

2018/08/12 DOTA

Python实现类继承实例

2014/07/04 Python

Python实现程序的单一实例用法分析

2015/06/03 Python

Python的dict字典结构操作方法学习笔记

2016/05/07 Python

Python 实现文件打包、上传与校验的方法

2019/02/13 Python

Python HTML解析模块HTMLParser用法分析【爬虫工具】

2019/04/05 Python

解决Python设置函数调用超时,进程卡住的问题

2019/08/08 Python

关于Tensorflow分布式并行策略

2020/02/03 Python

环法自行车赛官方商店：Le Tour de France

2017/08/27 全球购物

毕业生就业自荐信

2013/12/04 职场文书

护士检查书

2014/01/17 职场文书

小学生寒假家长评语

2014/04/16 职场文书

广播体操比赛口号

2014/06/10 职场文书

中班教师个人总结

2015/02/05 职场文书

关于Python中进度条的六个实用技巧分享

2022/04/05 Python

css如何把元素固定在容器底部的四种方式

2022/06/16 HTML / CSS