JQuery应用二：可编辑的表格

xiaobojava · 发表于 2013-2-7 23:53:24

<html><head><title>JQuery动态编辑的表格</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="css/editTable.css"><script type="text/javascript" src="js/jquery-1.4.2.js"></script><script language="javascript">$(document).ready(function(){//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数$("tbody tr:even").css("background-color","#ECE9D8");var numId = $("tbody td:even");//所有的得到表格左边的单元格都注册了点击事件numId.click(function(){var tdObj = $(this);//获得当前td单元格对象//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。if(tdObj.children("input").length>0){return false;}var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象//html()：取得第一个匹配元素的html内容var text = tdObj.html();inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象tdObj.html("");//将当前td单元格内容清空inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同inputObj.css("border-width","0");//设置文本框的边框inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样//设置文本框的背景色与单元格的背景色相同 inputObj.css("background-color",tdObj.css("background-color"));inputObj.appendTo(tdObj);//将文本框追加到单元格中//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）//inputObj.get(0).select();//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件inputObj.trigger("focus").trigger("select");//文本框的单击事件inputObj.click(function(){return false;});//处理文本框上的Enter和ESC事件inputObj.keyup(function(event){//获得当前所按下的键盘的键值var keyCode = event.which;if(keyCode == 13){//Entervar inputObjText = $(this).val();tdObj.html(inputObjText);tdObj.remove("input");}else if(keyCode == 27){//EsctdObj.html(text);tdObj.remove("input");}});});});</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> editTable.css内容如下：
table {border:1px solid black;/** * border-collapse : separate | collapse * 设置或检索表格的行和单元格的边是合并在一起(collapse没有边框)还是按照标准的HTML样式分开 **/border-collapse: collapse;/**单元格与单元格之间没有边框**/width: 400px;}table td {border:1px solid black;width: 50%;}table th {border:1px solid black;width: 50%; }tbody th {background-color: #A3BAE9;}

		自动登录	找回密码
密码			立即注册