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

日期函数扩展类Ver0.1.1

Sep 07 Javascript

不错的JS中变量相关的细节分析

Aug 13 Javascript

JavaScript内核之基本概念

Oct 21 Javascript

原生js获取宽高与jquery获取宽高的方法关系对比

Apr 04 Javascript

jquery中的常用事件bind、hover、toggle等示例介绍

Jul 21 Javascript

js中string转int把String类型转化成int类型

Aug 13 Javascript

jquery实现上下左右滑动的方法

Feb 09 Javascript

浅谈javascript的Array.prototype.slice.call

Aug 31 Javascript

Node.js 日志处理模块log4js

Aug 28 Javascript

JavaScript正则表达式简单实用实例

Jun 23 Javascript

解决vue axios的封装请求状态的错误提示问题

Sep 25 Javascript

微信小程序实现无限滚动列表

May 29 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+ajax无刷新上传图片实例代码

2015/11/17 PHP

PHP简单预防sql注入的方法

2016/09/27 PHP

Laravel-添加后台模板AdminLte的实现方法

2019/10/08 PHP

jQuery :first选择器使用介绍

2013/08/09 Javascript

js图片向右一张张滚动效果实例代码

2013/11/23 Javascript

window.open 以post方式传递参数示例代码

2014/02/27 Javascript

jquery设置按钮停顿3秒不可用

2014/03/07 Javascript

jquery跨域请求示例分享(jquery发送ajax请求)

2014/03/25 Javascript

使用js实现数据格式化

2014/12/03 Javascript

解决jquery中动态新增的元素节点无法触发事件问题的两种方法

2015/10/30 Javascript

实例讲解javascript注册事件处理函数

2016/01/09 Javascript

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

2016/01/19 Javascript

JS实现的表格行上下移动操作示例

2016/08/03 Javascript

详解Javascript中的原型OOP

2016/10/12 Javascript

微信小程序页面跳转和数据传递实例详解

2017/01/19 Javascript

利用JS实现简单的日期选择插件

2017/01/23 Javascript

jquery 判断是否支持Placeholder属性的方法

2017/02/07 Javascript

node.js中EJS 模板快速入门教程

2017/05/08 Javascript

Three.js入门之hello world以及如何绘制线

2017/09/25 Javascript

全面解析Vue中的$nextTick

2020/12/24 Vue.js

Python中用于返回绝对值的abs()方法

2015/05/14 Python

python实现爬虫下载美女图片

2015/07/14 Python

简单的python协同过滤程序实例代码

2018/01/31 Python

Python爬虫设置代理IP的方法(爬虫技巧)

2018/03/04 Python

TensorFlow Session会话控制&Variable变量详解

2018/07/30 Python

python使用tkinter库实现五子棋游戏

2019/06/18 Python

Python使用pyserial进行串口通信的实例

2019/07/02 Python

如何利用Python模拟GitHub登录详解

2019/07/15 Python

Python xmltodict模块安装及代码实例

2020/10/05 Python

Css3+Js制作漂亮时钟(附源码)

2013/04/24 HTML / CSS

营销人才自我鉴定范文

2013/12/25 职场文书

手工社团活动方案

2014/02/17 职场文书

犯错检讨书

2014/02/21 职场文书

抄袭同学作业检讨书1000字

2014/11/20 职场文书

PL350与SW11的比较

2021/04/22 无线电

使用Nginx搭载rtmp直播服务器的方法

2021/10/16 Servers