一样的table?不一样的table(可编辑状态table)


Posted in Javascript onSeptember 19, 2012

新的一天开始了,生活还要继续,今天要和大家分享的是不一样的table,普通的table就用于显示数据,今天要分享的table不仅仅能显示数据,还可以对数据进行编辑,当鼠标点击数据时相应的数据格就变成可编辑的状态,废话不多说,进入今天的主题,首先完成HTML页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQueryProject1</title> 
<meta name="author" content="Frank_Ren" /> 
<link type="text/css" rel="stylesheet" href="css/myCSS.css" /> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script type="text/javascript" language="JavaScript" src="js/myJSFile.js"></script> 
<!-- Date: 2012-09-17 --> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th colspan="2">鼠标点击下列内容可以进行编辑</th> 
</tr> 
</thead> 
<tbody id="content"> 
<tr> 
<th>学号</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td>000001</td> 
<td>张三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>赵六</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

没错现在它还是一个普通的table,一点样式都还没有,为了让这个table显得不那么抽象,接下来为它引入CSS样式
table{ 
width:400px; 
height: 150px; 
} 
table, table td, table th{ 
border:1px solid black; 
border-collapse: collapse; 
} 
table td{ 
width:50%; 
height: 25px; 
} 
thead th{ 
background-color:#87CEFA; 
} 
tbody th{ 
background-color:#FFFACD; 
}

在HTML页面中可编辑的页面元素就只有那么几个,很不幸table并不是其中一个,为了让table变得可编辑,就要向table中插入可编辑的页面元素,再用CSS装饰一下,让它看起来还是一个普通的table,然而却具备了可编辑的功能,这就是JS所要完成的功能,JS代码如下:
$(function(){ 
var content; 
$("#content tr:odd").css("background-color","#D2B48C"); 
$("#content tr:even").css("background-color","#C0C0C0"); 
$("#content td").click(function(){ 
var clickObj = $(this); 
content = clickObj.html(); 
changeToEdit(clickObj); 
}); 
function changeToEdit(node){ 
node.html(""); 
var inputObj = $("<input type='text'/>"); 
inputObj.css("border","0").css("background-color",node.css("background-color")) 
.css("font-size",node.css("font-size")).css("height","20px") 
.css("width",node.css("width")).val(content).appendTo(node) 
.get(0).select(); 
inputObj.click(function(){ 
return false; 
}).keyup(function(event){ 
var keyvalue = event.which; 
if(keyvalue==13){ 
node.html(node.children("input").val()); 
} 
if(keyvalue==27){ 
node.html(content); 
} 
}).blur(function(){ 
if(node.children("input").val()!=content){ 
if(confirm("是否保存修改的内容?","Yes","No")){ 
node.html(node.children("input").val()); 
}else{ 
node.html(content); 
} 
}else{ 
node.html(content); 
} 
}); 
} 
});

接下来对这段JS做简单的分析,全局变量 var content 用于保存编辑之前表格中的内容,有时候用户对表格进行编辑了但却并不想保存编辑后的结果,就需要将表格中的内容还原到编辑之前,所以当鼠标点击的时候首先要将表格的内容保存起来。

下面这两句$("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background-color","#C0C0C0"); 是让table具备隔行变色,只是为了增加表格的可视性。var inputObj = $("<input type='text'/>"); 这一句生成一个可编辑的JQuery对象,也就是要插入表格中的可编辑元素,后面那一串.css()方法是给inputObj对象追加CSS样式,.css()方法不仅可以给某个对象设置CSS样式还可以获取某个对象的CSS样式,JQuery中提供了很多这样的方法。很多时候JQuery方法执行过后返回回来的还是JQuery对象,所以就出现了inputObj.css().css().css()....这样的写法。

appendTo()方法就实现了表格的可编辑性(也可用appendix()),将可编辑元素插入到表格中。.get(0).select()这两个方法是为了选中inputObj中的内容让焦点落在可编辑元素上,需要注意的是这两个方法一定要写在appendTo()之后,inputObj.click(function(){})这个方法也是必不可少的,删掉这个方法会有一个很有趣的bug,大家可以试一试。

紧接着的 keyup(function(event){}),可以通过 event.which 的方式获取键盘按下的键所对应的键值,常用的键值有 Enter键:13、Esc键:27,当用户按下Enter键时,就保存编辑后的内容,并将表格还原成普通表格,当用户按下Esc键时,将表格中的内容还原,也将表格还原成普通表格。

用户体验,苹果的出现让这个词更深入人心,这里也凑下热闹。为了提高用户体验这里增加了blur(function(){})方法,当焦点离开可编辑元素时首先判断表格中的内容是否被改变,如果没有改变直接将表格及表格中的还原,如果有改变就提示用户是否保存。

今天的示例基本完工了,如果你将JS代码放在一个单独的JS文件中引用,可能会出现一个中文乱码的bug,不妨动手试一试。谢谢你耐心的读完本文,希望对你会有所帮助。

Javascript 相关文章推荐
JavaScript中两种链式调用实现代码
Jan 12 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
jquery实现保存已选用户
Jul 21 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 #Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 #Javascript
You might like
php 随机排序广告的实现代码
2011/05/09 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
高中生活自我鉴定
2014/01/18 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
不错的求职信范文
2014/07/20 职场文书