以前我在网上总会看类似这种的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实现代码
标签:
table排序,javascript

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。