编程 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操作iframe父子窗体示例

May 22 Javascript

jQuery简单实现页面元素置顶时悬浮效果示例

Aug 01 Javascript

手机端实现Bootstrap简单图片轮播效果

Oct 13 Javascript

基于Phantomjs生成PDF的实现方法

Nov 07 Javascript

有趣的bootstrap走动进度条

Dec 01 Javascript

Bootstrap整体框架之JavaScript插件架构

Dec 15 Javascript

javascript监听页面刷新和页面关闭事件方法详解

Jan 09 Javascript

springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项

Apr 23 Javascript

使用Math.max,Math.min获取数组中的最值实例

Apr 25 Javascript

20行js代码实现的贪吃蛇小游戏

Jun 20 Javascript

Webpack实战加载SVG的方法

Dec 26 Javascript

layui表单提交到后台自动封装到实体类的方法

Sep 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 redis setnx分布式锁简单原理解析

2020/10/23 PHP

JavaScript高级程序设计

2006/12/29 Javascript

javascript xml为数据源的下拉框控件

2009/07/07 Javascript

JS 文件大小判断的实现代码

2010/04/07 Javascript

js控制frameSet示例

2013/09/10 Javascript

JavaScript中的apply和call函数详解

2014/07/20 Javascript

javascript基于DOM实现权限选择实例分析

2015/05/14 Javascript

JS模拟并美化的表单控件完整实例

2015/08/19 Javascript

JavaScript的React框架中的JSX语法学习入门教程

2016/03/05 Javascript

BootStrap的alert提示框的关闭后再显示怎么解决

2016/05/17 Javascript

js学习阶段总结(必看篇)

2016/06/16 Javascript

AngularJS基础 ng-value 指令简单示例

2016/08/03 Javascript

老生常谈jquery中detach()和remove()的区别

2017/03/02 Javascript

Angular中实现树形结构视图实例代码

2017/05/05 Javascript

Ionic3 UI组件之Gallery Modal详解

2017/06/07 Javascript

EasyUI框架使用Ajax提交注册信息的实现代码

2017/09/27 Javascript

JS实现合并json对象的方法

2017/10/10 Javascript

js动态设置select下拉菜单的默认选中项实例

2018/08/21 Javascript

JS计算两个数组的交集、差集、并集、补集（多种实现方式）

2019/05/21 Javascript

JS事件流与事件处理程序实例分析

2019/08/16 Javascript

js实现跟随鼠标移动的小球

2019/08/26 Javascript

详细分析React 表单与事件

2020/07/08 Javascript

[03:40]DOTA2亚洲邀请赛小组赛第二日赛事回顾

2015/01/31 DOTA

python直接访问私有属性的简单方法

2016/07/25 Python

Python实现读取字符串按列分配后按行输出示例

2018/04/17 Python

python中yaml配置文件模块的使用详解

2018/04/27 Python

python处理csv中的空值方法

2018/06/22 Python

社会实践感言

2014/01/25 职场文书

电气个人求职信范文

2014/02/04 职场文书

三年级学生评语

2014/04/23 职场文书

社团活动总结报告

2014/06/27 职场文书

学校党的群众路线教育实践活动总结材料

2014/10/30 职场文书

三傻大闹宝莱坞观后感

2015/06/03 职场文书

初中思品教学反思

2016/02/20 职场文书

SQL Server代理：理解SQL代理错误日志处理方法

2021/06/30 SQL Server

pytorch中的torch.nn.Conv2d()函数图文详解

2022/02/28 Python