实现超用户体验 table排序javascript实现代码


Posted in Javascript onJune 22, 2009

以前我在网上总会看类似这种的JS效果:
实现超用户体验 table排序javascript实现代码
点击编辑时: (不好意思哈,图在文章最后面)
这种列表与编辑都在同一页的效果,确实很好,能够给用户带来意想不到的美好体验。可是它是怎么实现的呢?
其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的。因此我抽了点时间来实现它。当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是一个思路问题,下面我会具体的写是怎么实现的。
总体思路:给<TR>一个ID,以显示与隐藏来实现这种效果。
首先,实现这个关键桥段就是“ID”,因为你要显示与隐藏某个<tr>,唯一能区别它们的就是它们的ID号了,当然我们还是以循环输出的形式“<tr style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>">”。那么我们在JS代码中就可以以它们的ID号来识别它们了。
但关键问题又来了,我们怎么取这个ID值呢?可能有朋友与我一样想到了隐藏域,刚开始时我也这么想的,可是那是不行的,因为你用JS取隐藏域中的值时,那它的ID是定死了的,这样你只能每次都取到第一个<tr>的ID号,其它就取不到了。那又怎么办呢??呵呵。。别急。。。人总是有办法的。
我们还有“this”它呀,这个关键字确实是好东东,有了它“就天不怕,天不怕了”...
这样:我们在触发JS取值<TR>ID号的地方写上“<a href='#' onclick="display(this.id)" id="<?php echo $value['uuid'];?>/m"> ”。。。这样来我们就轻容取得了与<tr>类同(注意:为什么说类同我后面要说)的ID号了,可能细心的朋友已看到了我的代码后有一个“/m”。。。写这个的原因在于要与<tr>ID分开来,不然取不到值(ID是唯一性的)。。
这样一来,如果<TR>的ID号为“1223”,那么我“onclick”事件取上来的值就是“1223/m”,我们在用JS的分割字符串的方法来得到与<tr>相同的ID号。“ var vaarray=va.split('/');var id=vaarray[0];”
。。好了。既然ID号都得到还有什么不能做的呢。。。呵呵呵。下面我们就让它显示出来。“document.getElementById(id).style.display="block";”
....OK..OVER...
下面是部分关键代码:
JS部分如下:

//显示 
function display(va){ 
var vaarray=va.split('/'); 
var id=vaarray[0]; 
document.getElementById(id).style.display="block"; 
var parID=id+'p'; 
document.getElementById(parID).style.display="none";//这里是相应某个<tr>的隐藏 
}

HTML部分如下:
<tr bgcolor="#D3DCE3" style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>"> 
<th width="13%">修改 
<input type="button" name="Input" value="保存"/> 
<input type="button" name="Input" value="取消" onclick="backs(this.id)" id="<?php echo $value['uuid'];?>/n"/></th> 
<th width="11%"><input name="text" type="text" value="<?php echo $value['username'];?>" /></th> 
<th width="15%"><input name="text" type="text" value="<?php echo $value['createTime'];?>" /></th> 
<th width="8%"><input type="text" name="Input" value="<?php echo $value['uuid'];?>" /></th> 
<th> <a href='#' onclick="display(this.id)" id="<?php echo $value['uuid'];?>/m"> 
显示<!--这里是触发JS--> 
</a> </th> 
</tr>

另说明:1以上代码可能我在发表时有误,如不能实现,可以联系我。
2以上只是我的学习记录,可能不专业,如有错误的地方,很欢迎你指出来,我一定加以改进。
实现超用户体验 table排序javascript实现代码
Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
vue实现五子棋游戏
May 28 Javascript
js 单引号 传递方法
Jun 22 #Javascript
使弱类型的语言JavaScript变强势
Jun 22 #Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 #Javascript
PNG背景在不同浏览器下的应用
Jun 22 #Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 #Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 #Javascript
javascript 异常处理使用总结
Jun 21 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
解析csv数据导入mysql的方法
2013/07/01 PHP
PHP多文件上传类实例
2015/03/07 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
原生js实现二级联动菜单
2019/11/27 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python日期的加减等操作的示例
2017/08/15 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
学习Python爬虫的几点建议
2020/08/05 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
活动策划邀请函
2014/02/06 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
中学校庆方案
2014/03/17 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
小学一年级数学教学反思
2016/02/16 职场文书