一样的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之自定义类型
May 04 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
Vue动态组件实例解析
Aug 20 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python按钮的响应事件详解
2019/03/04 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
学校读书活动总结
2014/06/30 职场文书
励志演讲稿500字
2014/08/21 职场文书
员工工作自我评价
2014/09/26 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers