实战Jquery--能够编辑的表格
Posted wzjhoutai
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实战Jquery--能够编辑的表格相关的知识,希望对你有一定的参考价值。
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的过程中会出现一些小bug.通过jQuery函数就能够一一解决.
以下看下html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JQuery实例:能够编辑的表格</title> <link rel="stylesheet" type="text/css" href="EditTable.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="EditTable.js"></script> </head> <body> <table> <thead> <tr> <th colspan="2">鼠标点击表各项就能够编辑</th> </tr> </thead> <tbody> <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中能够包括thead和tbody标签,表头的内容放在th中.这样写的优点是能够通过标签选择器选择须要的内容,比方:tbody th{}
js代码:
//须要首先通过Javascript来解决内容部分的奇偶行的背景色不同 $(function(){ //找到表格的内容区域中全部的奇数行 $("tbody tr:even").css("background-color","#ECE9D8"); //找到全部的学号单元格,保存起来 var numTd = $("tbody td:even"); numTd.click(function(){ var tdObj=$(this); if(tdObj.children("input").length>0){ // 当前td中有input文本框,不运行click处理 return false; } var txt = tdObj.html(); //创建一个文本框 //去掉文本框边框 //设置文本框中字体为16px //使文本框的宽度和td的宽度同样 //设置文本框背景色 //将当前td中的内容放到文本框中 var inputObj=$("<input type='text'>").css("border-width","0") .css("font-size","16px").width(tdObj.width()) .css("background-color",tdObj.css("background-color")) .val(tdObj.html()); //将文本框插入到td中 tdObj.html(""); inputObj.appendTo(tdObj); //文本框插入之后被选中 inputObj.trigger("focus").trigger("select"); inputObj.click(function(){ return false; }); //处理文本框上回车和ESC按键操作 inputObj.keyup(function(event){ var keycode=event.which; //回车 if(keycode==13){ var inputtext=$(this).val(); tdObj.html(inputtext); } //esc if(keycode==27){ tdObj.html(txt); } }); }); });
在$ 函数中,通过$("tbody tr")能够返回tbody中全部tr节点,另外,$("tbody tr:even")能够返回tbody中全部索引值是偶数的tr节点.
在上面的代码中我们能够看到html方法,它能够设置或获取节点的html内容:
tdObj.html(inputtext); 为设置节点内容
var txt=tdObj.html(); 为获取节点html内容
var inputObj=$("<input type=‘text‘>");
在这里假设$()方法的參数是一般html文本就能够创建一个DOM节点,并包装成jQuery对象.而后面一连串的CSS代码是链式写法,因为jQuery大部分方法都会返回运行这种方法的jQuery对象,因此能够採用这个写法来编写给予jQuery的代码.
在处理文本框上回车和ESC按键操作时,响应keyup事件,在jQuery中,某个事件方法的參数function上能够定义一个event的參数,jQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象,这个event对象上有一个which属性能够获得键盘按键的键值.
CSS代码:
table{ border:1px solid black; /*修正单元格之间的边框不能合并的问题*/ border-collapse:collapse; width:400px; } table td{ border:1px solid black; width:50%; } table th{ border:1px solid black; width:50%; } tbody th{ background:#A38ae9; }
CSS 代码没有什么可说的了,这里用的是最简单的CSS样式并且代码量非常少.jQuery的强大才刚刚体会到,接下来的实战一定会更加easy,希望能学到很多其它的知识,添加代码量.
以上是关于实战Jquery--能够编辑的表格的主要内容,如果未能解决你的问题,请参考以下文章