实现超用户体验 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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
用javascript实现画板的代码
2007/09/05 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
详解动画插件wow.js的使用方法
2017/09/13 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
javascript数组拍平方法总结
2018/01/20 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Pycharm Git 设置方法
2020/09/15 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
学习十八大报告感言
2014/02/04 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
八年级历史教学反思
2016/02/19 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
欧元符号 €
2022/02/17 杂记
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS