实现超用户体验 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 form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JavaScript实现星级评分
Jan 12 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jsonp跨域请求详解
Jul 13 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 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
php中的登陆login
2007/01/18 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Python开发编码规范
2006/09/08 Python
Python+django实现文件上传
2016/01/17 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
python pip如何手动安装二进制包
2020/09/30 Python
python调用win32接口进行截图的示例
2020/11/11 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
治庸问责工作总结
2015/08/11 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers
MySQL索引失效场景及解决方案
2022/07/23 MySQL