实现超用户体验 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获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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
模板引擎正则表达式调试小技巧
2011/07/20 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
ECMAScript6--解构
2017/03/30 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
Vue3为什么这么快
2020/09/23 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python用户管理系统
2018/03/13 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python实现飞行棋游戏
2020/02/05 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技