JQuery可编辑的表格

        在学习ASP.NET的时候已经学习了如何制作可编辑的表格，在ASP.NET中的学习主要是熟悉如何使用控件，在这里我们用JavaScript+CSS制作可编辑的表格，首先对于文件的引入，上篇博客已经详细的介绍了，这里不再重复，用HTML编写一个表格主要是table标签的使用，table标签下的表格标题和内容thead和tbody，以及tr、th、td标签

<table>
	<thead>
	<span style="white-space:pre">	</span><tr>
		<span style="white-space:pre">	</span><th colspan="2">
			<span style="white-space:pre">	</span>鼠标点击表格项就可以编辑
			</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>

这里手写出了表格的HTML代码。

然后进行表格样式编写：

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-color:#A3BAE9;	
}

       其中的table标签可以找到整个表格，使用标签选择器对整个表格的样式进行设置，找到table下的td、和th标签的编写为table td{}和table th{}，在表格中可以通过border-collapse:collapse合并单元格。通过.css文件就完成了对表格样式的简单设置。

下面是.js文件的编写，通过.js文件对表格进行可编辑以及奇偶行变色的设置:

$(function(){}表示页面加载完成之后需要执行的代码，

首先找到表格内容区域的所有行，然后定位到所有的奇数行，设置其css样式:

$("tbodytr:even").css("background-color","#ECE9D8");其中的even是表示所有的偶数行，因为整个表格的所有奇数行对应的是tbody中的所有偶数行。

找到表格中的所有学号单元格，给这些单元格添加单击事件：

var numTd=$("tbody td:even")
numTd.click(function(){}

       在这个单击事件中我们要完成的功能是使表格呈现编辑状态，我们在表格的单元格中创建一个文本框，然后通过链式的方式设置设置文本框的样式，让它充满整个单元格，并且呈现编辑文本状态。

//给这些单元格注册鼠标的点击事件
numTd.click(function(){
			
//找到当前鼠标点击的td，this对应的就是响应了click的那个td
<span style="white-space:pre">	</span>var tdObj=$(this);
	if(tdObj.children("input").length>0){
	//当前td中的input，不执行click事件
		return false;
	}
	var text=tdObj.html();
	//清空td中的内容
	tdObj.html("");
	//创建一个文本框
	//去掉文本框的边框
	//设置文本框中的字体大小是16px
	//使文本框的宽度和td的宽度相同
	//设置文本框的背景色
	//将当前td中的内容放到文本框中
	//将文本框插入到td中
	var  inputObj=$("<input type='text'>").css("border-width","0").css("font-size","14px").width(tdObj.width())
	.css("background-color",tdObj.css("background-color")).val(text).appendTo(tdObj);
	//使文本框插入之后被选中
	inputObj.trigger("focus").trigger("select");
	inputObj.click(function(){
	<span style="white-space:pre">	</span>return false;
	});

         在链式的代码部分，.css方法可以用于设定获取节点的css属性，参数名是css的属性名，.html可以设置或者获取节点的HTML内容，.val方法可以获取节点的额value值，.width方法可以设置或获取某个节点的宽度，appendTo方法可以将一个节点追加到另一个节点的所有子节点的后面。

JQuery的大部分方法都会执行这个方法的JQuery的对象，通常采用这种链式的方式编写代码，使整个JQuery代码的编写更加简洁。

下面是对文本框中使用快捷键的操作的代码：

首先获取当前按下的键值，回车键：

var keycode=event.which;
if(keycode==13){
	//获取当前文本框中的内容
	var inputtext=$(this).val();
	//将td的内容修改成文本框的内容
	tdObj.html(inputtext);
}

在event对象上的which属性可以获取键盘按下的键值。
Esc退出键：
//处理Esc键的情况
	if(keycode==27){
	//将td中的内容还原成text
	tdObj.html(text);
}

         到此整个可编辑的表格就制作完成了，应用的知识在整个制作过程中已经穿插的讲解了，这里重点理解js文件中的代码的含义，整个表格制作过程的思路为：

1、创建表格 :<table></table>

2、CSS设置基础表格样式:tbale标签选择器

3、JS对表格的特别样式进行设置：通过even获取表格的奇数行（内容的偶数行）

4、编写表格中单元格的单击事件，通过链式的方式在表格中添加一个文本框，然后设置文本框为可编辑的状态并且设置显示样式：children属性获取子节点，trigger触发某个事件的发生等等。

5、编写快捷键操作：event.which获取键值，$(this).val()获取文本框的内容，tdObj.html(inputtext)修改文本框的内容。

         记得当时在ASP.NET的最后一个实例的学习时，这个功能的实现确实让我头疼了，现在通过JQuery来轻松的实现，对于理解JQuery的强大又加深了一步，这个JavaScript框架为开发者开发出功能强大的动态网页提供了很大的帮助。