实现超用户体验 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可突破windows弹退效果代码
Aug 09 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
Vue render深入开发讲解
Apr 13 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
浅析JavaScript预编译和暗示全局变量
Sep 03 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之第六天
2006/10/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JS功能代码集锦
2016/05/04 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
python利用hook技术破解https的实例代码
2013/03/25 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python实现文本界面网络聊天室
2018/12/12 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
北京申奥口号
2014/06/19 职场文书
学雷锋宣传标语
2014/06/25 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
工程承包协议书范本
2014/09/29 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
学生党员检讨书范文
2014/12/27 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js