实战Jquery(二)--可以编辑的表格

来源：互联网发布：mysql自动断开编辑：程序博客网时间：2024/05/21 04:02

今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;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);}//escif(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的强大才刚刚体会到,接下来的实战一定会更加容易,希望能学到更多的知识,增加代码量.

0 0