一样的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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
jquery插件validate验证的小例子
May 08 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
javascript基础知识讲解
Jan 11 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
小程序自定义轮播图圆点组件
Jun 25 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判断字符以及字符串的包含方法属性
2008/08/30 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php截取中文字符串函数实例
2015/02/23 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
python的Template使用指南
2014/09/11 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python简单区块链模拟详解
2019/07/03 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python是怎样处理json模块的
2020/07/16 Python
python输入中文的实例方法
2020/09/14 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
2013年学期结束动员演讲稿
2014/01/07 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
置业顾问岗位职责
2014/03/02 职场文书
文明寝室申报材料
2014/05/12 职场文书
考察邀请函范文
2015/01/31 职场文书
英语通知范文
2015/04/22 职场文书
教师节倡议书2015
2015/04/27 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers