实现超用户体验 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读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js日期相关函数总结分享
Oct 15 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
javascript生成大小写字母
Jul 03 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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
php抓取https的内容的代码
2010/04/06 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
php连接mysql数据库
2017/03/21 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python运行异常管理解决方案
2020/03/09 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
介绍一下Python下range()函数的用法
2013/11/07 面试题
商场总经理岗位职责
2014/02/03 职场文书
微笑服务演讲稿
2014/05/13 职场文书
法语专业求职信
2014/07/20 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
升职感谢信
2015/01/22 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
文艺节目主持词
2015/07/06 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
详解Django的MVT设计模式
2021/04/29 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android