实现超用户体验 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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
原生javascript获取元素样式
Dec 31 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
js实现表格单列按字母排序
Aug 12 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
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
Yii实现简单分页的方法
2016/04/29 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
python 循环while和for in简单实例
2016/08/16 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
日语专业推荐信
2013/11/12 职场文书
人资专员岗位职责
2014/04/04 职场文书
假面舞会策划方案
2014/05/29 职场文书
员工薪酬激励方案
2014/06/13 职场文书
五一口号
2014/06/19 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
三方合作意向书范本
2015/05/09 职场文书
2015年教研工作总结
2015/05/23 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
vue3获取当前路由地址
2022/02/18 Vue.js
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android