实现超用户体验 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获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
轮播的简单实现方法
Jul 28 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
javascript实现留言板功能
Feb 08 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
node.js基础知识汇总
Aug 25 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
JS Timing
2007/04/21 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
对python:循环定义多个变量的实例详解
2019/01/20 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
通过实例了解python property属性
2019/11/01 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
初中三好学生事迹材料
2014/01/13 职场文书
技术合作协议书范本
2014/04/18 职场文书
书香校园建设方案
2014/05/02 职场文书
地质灾害防治方案
2014/05/14 职场文书
离婚协议书范文2014
2014/10/16 职场文书
财务人员岗位职责
2015/02/03 职场文书
捐款通知怎么写
2015/04/24 职场文书
2015年商场工作总结
2015/04/27 职场文书
公司档案管理制度
2015/08/05 职场文书