一样的table?不一样的table_jquery_脚本之家

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

JQueryProject1

鼠标点击下列内容可以进行编辑

学号

姓名

000001

张三

000002

李四

000003

王五

000004

赵六

没错现在它还是一个普通的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代码如下:
复制代码 代码如下: ${ var content;
$.css(“background-color”,”#D2B48C”);
$.css(“background-color”,”#C0C0C0″); $.click{ var clickObj = $; content
= clickObj.html(); changeToEdit; function changeToEdit; var inputObj =
$(“”); inputObj.css.css(“background-color”,node.css
.css(“font-size”,node.css.css
.css(“width”,node.css.val.appendTo.select(); inputObj.click{ return
false; }).keyup{ var keyvalue = event.which; if{
node.html(node.children; } if{ node.html.blur{
if(node.children!=content){
if(confirm(“是否保存修改的内容?”,”Yes”,”No”)){ node.html(node.children;
}else{ node.html; } }else{ node.html;
接下来对这段JS做简单的分析,全局变量 var content
用于保存编辑之前表格中的内容,有时候用户对表格进行编辑了但却并不想保存编辑后的结果,就需要将表格中的内容还原到编辑之前,所以当鼠标点击的时候首先要将表格的内容保存起来。
下面这两句$.css(“background-color”,”#D2B48C”);
$.css(“background-color”,”#C0C0C0″);
是让table具备隔行变色,只是为了增加表格的可视性。var inputObj = $(“”);
这一句生成一个可编辑的JQuery对象,也就是要插入表格中的可编辑元素,后面那一串.css()方法是给inputObj对象追加CSS样式,.css()方法不仅可以给某个对象设置CSS样式还可以获取某个对象的CSS样式,JQuery中提供了很多这样的方法。很多时候JQuery方法执行过后返回回来的还是JQuery对象,所以就出现了inputObj.css….这样的写法。
appendTo()方法就实现了表格的可编辑性,将可编辑元素插入到表格中。.get这两个方法是为了选中inputObj中的内容让焦点落在可编辑元素上,需要注意的是这两个方法一定要写在appendTo()之后,inputObj.click这个方法也是必不可少的,删掉这个方法会有一个很有趣的bug,大家可以试一试。
紧接着的 keyup,可以通过 event.which
的方式获取键盘按下的键所对应的键值,常用的键值有
Enter键:13、Esc键:27,当用户按下Enter键时,就保存编辑后的内容,并将表格还原成普通表格,当用户按下Esc键时,将表格中的内容还原,也将表格还原成普通表格。
用户体验,苹果的出现让这个词更深入人心,这里也凑下热闹。为了提高用户体验这里增加了blur方法,当焦点离开可编辑元素时首先判断表格中的内容是否被改变,如果没有改变直接将表格及表格中的还原,如果有改变就提示用户是否保存。
今天的示例基本完工了,如果你将JS代码放在一个单独的JS文件中引用,可能会出现一个中文乱码的bug,不妨动手试一试。谢谢你耐心的读完本文,希望对你会有所帮助。

Copyright @ 2015-2020 ca88 版权所有
网站地图xml地图