实现超用户体验 table排序javascript实现代码_javascript技巧

以前我在网上总会看类似这种的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以上只是我的学习记录,可能不专业,如有错误的地方,很欢迎你指出来,我一定加以改进。

时间: 2024-09-13 13:40:42

实现超用户体验 table排序javascript实现代码_javascript技巧的相关文章

js给table赋值的实例代码_javascript技巧

要求:用js实现给一个table赋值如上:(定义X=70 [HTML] <table class="table table-bordered"> <thead> <tr> <th colspan="5" class="active">经济条件较好地区学费表</th> </tr> <tr> <th></th> <th>4-8人班&

JavaScript 冒泡排序和选择排序的实现代码_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所述: var array = [1,2,3,4,5]; // ---> 服务 //效率 ---> 针对一个有序的数组 效率最高 //标志 true false for(var j = 0; j < array.length - 1;j++ ){ //- j 每次排序完成之后 后面减少比较的次数 var isTrue = true; //如果数组本身就是升序,则直接输出 for(var i = 0; i < array.length -

js实现超简单的展开、折叠目录代码_javascript技巧

本文实例讲述了js实现超简单的展开.折叠目录代码.分享给大家供大家参考.具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下: <title>可折叠展开的简单目录</title> <style> div{

JS实现超精简响应鼠标显示二级菜单代码_javascript技巧

本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

在页面中输出当前客户端时间javascript实例代码_javascript技巧

时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n

JavaScript Table排序 2.0 (更新)_javascript技巧

ID  名称 / 类型 上传时间 大小 C R 1 new.htm 2008/9/12 423.09 K 2 Scroller.js 2008/9/23 2.5 K 3 AlertBox.js 2008/9/23 3.48 K 4 1.xml 2008/10/4 11.13 K 5 4.xml 2008/10/4 351 b 6 news.htm 2008/10/4 13.74 K 7 function.js 2008/10/4 2.78 K 8 神秘园 - Nocturne.mp3 2008/

html中table数据排序的js代码_javascript技巧

对了,注意那个innerText和innerHTML 复制代码 代码如下: function sortCells(event) { var obj = event.target; var count = 0; count是记录点击次数的,根据奇偶进行升序或降序 if(!obj.getAttribute("clickCount")){ obj.setAttribute("clickCount", 0); } else { count = parseInt(obj.ge

一个特殊的排序需求的javascript实现代码_javascript技巧

原问题帖在这里:http://topic.csdn.net/u/20081130/09/18d455a6-65e1-4d00-aa8c-d9742654cd8c.html  排序前:"Zo","Ad","bC","dad", "bood","bada","Admin","Good","aete","cc",&

javascript判断用户浏览器插件安装情况的代码_javascript技巧

复制代码 代码如下: document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>", "<TH ALIGN=left>i", "<TH ALIGN=left>名称", "<TH ALIGN=left>文件名", "<TH ALIGN=left>描述", "<TH ALIGN=lef