基于jquery的高性能td和input切换并可修改内容实现代码
在之前的基础上,添加方向键左右支持。
在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下,
这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡。下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下
当你点击其中一个td时,就会出现下面这样
当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td。同时支持回车,上下方向键,进行向右,上下移动。
可以对这个做一些扩展,做出一些很实际的功能,(对大批量数据编辑等等)。不多说了,附上源码,仅供参考。
在线演示地址http://demo.jb51.net/js/td_input_edit/index.htm
打包下载地址http://xiazai.jb51.net/201101/yuanma/td_input_edit.rar
相关推荐
-
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了
-
JQuery each()函数如何优化循环DOM结构的性能
如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 复制代码 代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children('tbody'), tr
-
JQuery for与each性能比较分析
最近在做一个性能优化方面的工作,遇到很多细节问题,现在一一把遇到的问题记录下来分享给大家,废话就不多谢,我直接贴代码. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>for与each性能比较</title> <script src="../Cks/jquery-1.7.1.min.j
-
提升jQuery的性能需要做好七件事
做好七件事帮你提升jQuery的性能,想知道哪几件事情吗? 1. Append Outside of Loops 凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个常见的问题. $.each( myArray, function( i, item ) { var newListItem = "<li>" + item + "</li>"; $( &
-
Jquery优化效率 提升性能解决方案
例如有一段HTML代码: 1.总是从ID选择器开始继承 以下是引用片段:<div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li><input type="radio" class="
-
jquery提升性能最佳实践小结
将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 复制代码 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个. 复制代码 代码如下: // 别这样 $.each(really
-
jquery选择器的选择使用及性能介绍
在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了. 从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上. 前言:对于写在<script></script>中的代码,一般在JS环境,我们
-
打造基于jQuery的高性能TreeView(asp.net)
根据我的项目实践情况,主要是几个关键点: 1:支持静态的树,即一次性将全部数据加载到客户端.2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据.3:Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点)4:能够承载大数据量,并性能表现优异5:能够在主流浏览器中运行良好 那我要打造的TreeView就是为了实现这个5个主要指标的. 先来看下效果图 上图是中国行政区域的数据树,总共得节点是3500+. 那么我
-
JQuery Tips(4) 一些关于提高JQuery性能的Tips
在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如: 复制代码 代码如下: <div id="a"> <div class="b"> <div class="c"> <div class="d"&g
-
基于jquery的高性能td和input切换并可修改内容实现代码
在之前的基础上,添加方向键左右支持. 在实际工作中,我们会碰到这样一个情况.在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下, 这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡.下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下 当你点击其中一个td时,就会出现下面这样 当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td.同时支
-
基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
-
基于jQuery全屏焦点图左右切换插件responsiveslides
基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览 源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,
-
基于Jquery实现的一个图片滚动切换
首先还是要引用jquery框架的. 然后开始HTML代码: 复制代码 代码如下: <div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt
-
基于jQuery的淡入淡出可自动切换的幻灯插件
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jqu
-
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路. 其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 点此查看DEMO 点此下载插件 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定
-
基于jquery编写的横向自适应幻灯片切换特效的实例代码
复制代码 代码如下: <script type="text/javascript">jQuery(".fullSlide").hover(function() { jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() { jQuery(this).find(".prev,.next&q
-
ASP.NET中基于JQUERY的高性能的TreeView补充
下面贴上完整的代码,我走了很多弯路,原因就是看了回复中朋友们的代码,现在想起来其实不用那么费事吧. 复制代码 代码如下: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery.mytree.js" type="text/javascript"></scri
-
基于jquery的图片轮播 tab切换组件
目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn
随机推荐
- jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
- 使用coffeescript编写node.js项目的方法汇总
- 用js实现的比较经典实用的触发型导航菜单
- javascript判断是否有对RadioButtonList选项选择
- PHP封装的HttpClient类用法实例
- Pyramid Mako模板引入helper对象的步骤方法
- python魔法方法-属性访问控制详解
- jsp页面中显示word/excel格式的文档的方法
- 深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
- MySql Group By对多个字段进行分组的实现方法
- linux忘记mysql密码处理方法
- 如何制作一个弹出式的调查窗口?
- juery框架写的弹窗效果适合新手
- JS记录用户登录次数实现代码
- 用js自动判断浏览器分辨率的代码
- JS完成代码前最好对其做5件事
- linux线程切换和进程切换的方法
- Java中的数组基础知识学习教程
- C#配置文件操作类分享
- ThinkPHP中的系统常量和预定义常量集合