一样的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 新手24条实用建议[TUTS+]
Jun 21 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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
中英文字符串翻转函数
2008/12/09 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python 反向输出字符串的方法
2018/07/16 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python3 re返回形式总结
2020/11/20 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
C语言开发工程师测试题
2016/12/20 面试题
大学生毕业自荐信
2013/10/10 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
团结演讲稿范文
2014/05/23 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2015年新学期寄语
2015/02/26 职场文书
领导离职感言
2015/08/03 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL