基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧

在之前的基础上,添加方向键左右支持。

在实际工作中,我们会碰到这样一个情况。在页面中显示着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

时间: 2024-10-10 07:25:41

基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧的相关文章

jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码_javascript技巧

本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

『JavaScript』限制Input只能输入数字实现思路及代码_javascript技巧

这玩意很多人写过,但是今天临时要用的时候找不到符合需求的,所以立马来写一个,既然都写完了而且还满符合需求的就放上来让大家鞭一鞭. 需求很简单,一个文字方块必须限制只能输入数字(或是小数点)并且要支援 IE 和 Firefox. HTML的 Input 是这样下滴 复制代码 代码如下: <input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),

javascript(jquery)利用函数修改全局变量的代码_javascript技巧

我是将当前页用一个全局变量存储.同时在"最后一页"链接里单击方法调用一个函数自动去修改页数为最后一页,然后再调用载入评论的方法. 可是我发现点击"最后一页"第一次的时候系统没反应,再点击一次就抓去最后一页的资料了! 要说全局变量没改,应该是改了,就仿佛改了页数而载入评论的方法失效了一样. 代码如下: 复制代码 代码如下: var page = 1; //初始化页数为第一页 var str = ""; $(document).ready(funct

基于jQuery实现仿百度首页选项卡切换效果_jquery

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&

基于jQuery全屏焦点图左右切换插件responsiveslides_jquery

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

input file上传 图片预览功能实例代码_javascript技巧

input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

BootStrap中Tab页签切换实例代码_javascript技巧

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile&

input+select(multiple) 实现下拉框输入值_javascript技巧

于是尝试了用input+select来实现,结果如下:   具体代码及演示地址:www.homdian.com/test.aspx 这种方法其实是在下拉框上压一个文本框,能够实现输入,也能够实现下拉框的选择.但根据输入值用用异步的方式绑定下拉框选项时, 无法展开下拉框,到网上找了段代码: 复制代码 代码如下: document.form1.ddlMovName.focus(); var WshShell = new ActiveXObject("Wscript.Shell"); try

基于jquery实现最简单的选项卡切换效果_jquery

这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh