繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现超用户体验 table排序javascript实现代码
- Javascript
- 编辑浪子版表单验证类
- JavaScript脚本语言在网页中的简单应用
- getElementById在任意一款浏览器中都可以用吗的疑问回复
- “增强js程序代码的健壮性”之我见大量示例代码
- javascript之卸载鼠标事件的代码
- 静态页面下用javascript操作ACCESS数据库(读增改删)的代码
- javascript操作文本框readOnly
- 用javascript实现gb2312转utf-8的脚本
- 网站被黑的假象--ARP欺骗之页面中加入一段js
- (JS实现)MapBar中坐标的加密和解密的脚本
- 几款极品的javascript压缩混淆工具
- [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密
- JavaScript中的new的使用方法与注意事项
- 分别用两个函数实现的菜单
- 非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签
- 用javascript实现的支持lrc歌词的播放器
- JS加ASP二级域名转向的代码
- 效果直逼flash的Div+Css+Js菜单
- input之怎么清除默认值
- 用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]
Javascript 中的 实现超用户体验 table排序javascript实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 321 ::
收藏到网摘: n/a
以前我在网上总会看类似这种的JS效果：
点击编辑时: (不好意思哈，图在文章最后面)
这种列表与编辑都在同一页的效果，确实很好，能够给用户带来意想不到的美好体验。可是它是怎么实现的呢？
其实实现这种效果有很多方法，当然如果你的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以上只是我的学习记录，可能不专业，如有错误的地方，很欢迎你指出来，我一定加以改进。
评论 (0) All
