实现超用户体验 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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
vue-router 学习快速入门
Mar 01 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Vue.use源码分析
2017/04/22 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python操作日期和时间的方法
2014/03/11 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python导入模块交叉引用的方法
2019/01/19 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python安装scipy的步骤解析
2019/09/28 Python
wxPython实现整点报时
2019/11/18 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
会议邀请书范文
2014/02/02 职场文书
学生党员公开承诺书
2014/05/28 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
javascript之Object.assign()的痛点分析
2022/03/03 Javascript