一样的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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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/10 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python__new__内置静态方法使用解析
2020/01/07 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript