JQuery 实站第二讲：可编辑的表格
在写这篇文章之前，首先向大家推荐两本书和一个Javascript开发工具。
第一本书：《JQuery in Action》（中文版：Jquery 实战）这本书全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。《jQuery实战》适合各层次Web开发人员。
作者简介：
Bear Bibeault，著名Web技术专家。有30多年编程经验。也是技术社区JavaRanch的核心人物之一。除本书外，他还和其他世界级Web专家联袂打造了圣经级巨著《Ajax实战：实例详解》和《Ajax实战：Prototype与Scriptaculous篇》（均由人民邮电出版社出版）。
Yehuda Katz，著名Web技术专家。jQuery插件开发团队领导人，Merb等开源项目核心开发人员。
第二本书：《悟透javascript》 (美绘本) 正是你所需要的！通过《悟透JavaScript》，您可以独辟蹊径学习、理解和运用JavaScript；通过《悟透JavaScript》(美绘本) ，您可以更轻松地编写动态网页；通过《悟透JavaScript》，您可以更深入地理解AJAX技术；通过《悟透JavaScript》，您可以在学习技术本身的同时，领悟到编程的境界；通过《悟透JavaScript》，您可以更多地享受到读书的快乐和程序的魅力！
作者简介：李战，阿里软件的老顽童，混迹IT江湖多年。在数据库、Web架构、前端技术及数据库全文检索方面有身后内力！
开发工具：1st JavaScript Editor Pro 5.1
1st JavaScript Editor 是一款强大的JavaScript开发、校验和调试工具，它简单易用，不论你是初学者或者是专业的开发人士，都可以轻松上手！同时它又是完美的Ajax (Asynchronous JavaScript and XML),CSS, HTML, DOM DHTML开发工具！
官方地址：http://yaldex.com/
为什么要在这篇文章之前加上这些东西。您可能要骂了，Y的又一个书托？！上述内容的确是从售书网的摘要要粘过来的，但我不是一个托。也曾听书托介绍这两本书，元旦的时候去中关村图书大厦看了看，就爱不释手了。价格虽然贵了点，但决对是值得一看的两本书。建议先看《悟透javascript》 (美绘本)。它可以让你又以一种全新的思维去认识和理解javascript。看完之后在来阅读《JQuery in Action》（中文版：Jquery 实战）是一个不错的学习和巩固的过程。
废话就不多说，现在进入正题。今天我们来学习王兴魁老师的JQuery实战第二讲：可编辑的表格。
利用今天所学的知识，我们可以做一个自已的可编辑的表格插件。虽然现在这类可以显示又可以编辑的控件不少，包括GridView也不是很灵活，所以我们得学会自已来做一个类似功能的插件。
实现步骤：
首先我们来实现第一步：建立文件EditTable.html
代码
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th colspan="2">
鼠标单击就可编辑
</th>
</tr>
</thead>
<tbody>
<tr>
<th> 学号 </th>
<th> 姓名</th>
</tr>
<tr>
<td>00001</td>
<td>张三</td>
</tr>
<tr>
<td>00002</td>
<td>李四</td>
</tr>
<tr>
<td>00003 </td>
<td>王五</td>
</tr>
<tr>
<td>00004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
预览效果如图：
但我们发现这个表格没有任何的边框，与我们最终的效果相差太远，下面我们能过css文件来实现表格的边框及最后的样式。在css文件夹下建立EditTable.css文件。
代码
table
{
border:1px solid black;
/*修改单元格之间的边框不能合并的问题*/
border-collapse:collapse;
width:400px;
}
/*table中包含的所有td*/
table td
{
/*td边框宽度*/
border:1px solid black;
width:50%;
}
table th
{
border:1px solid black;
width:50%;
}
tbody th
{
/*th背景色*/
background-color: #A3BAE9;
}
在html中引入css文件：
最终效果如下：
下面我们来实一JQuery代码部分，在Javascript文件夹中简历EditTable.js文件。
代码
//在页面的DOM装载完之后执行方法
//$(document).ready(function() {
//});
//简化上述写法
$(function() {
//找到表格的内容区域中的所有奇数行
//odd筛选奇数行
//even 是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，
//因数数组中下标元素，实际上才是我们期望的tbody里的奇数行。
$("tbody tr:even").css("background-color", "#ECE9D8");
//找到学号的单元格
var numTD = $("tbody td:even")
//给这些单元格注册事件，不需要用循环jq会把所有的td的事件都注册上
numTD.click(function() {
// //创建一个文本框
// var inputObj = $("<input type='text'/>");
// //去掉文本框的边框
// // inputObj.css("border-width", "0");
// //找到当前鼠标点击的td，this对应了的就是响应了click的那个td
// var objtd = $(this);
// //使文本框的宽度和知的宽度相同
// inputObj.width(objtd.width())
// //设置文本框中字体的大小是16px
// inputObj.css("font-size", "16px");
// //设置文本框的背景色
// inputObj.css("background-color", objtd.css("background-color"));
// //需要将当前td中的内容放到文本框中
// inputObj.val(objtd.html());
// //清空td中的内容
// objtd.html("");
// //将文本框插入到td中
// inputObj.appendTo(objtd);
// //默认选中 浏览器的兼容性可以使用下面的方法
// inputObj.get(0).select();
// //文本框属于td解决在文本框上点击时不将事件传回td中
// inputObj.click(function() {
// return false;
// });
//简化上述写法
//找到当前鼠标点击的td，this对应了的就是响应了click的那个td
var objtd = $(this);
//判断objtd中是否存在文本框控件
if (objtd.children("input").length > 0) {
//当前td的input不执行click
return false;
}
//需要将当前td中的内容放到文本框中
var text = objtd.html();
//清空td中的内容
objtd.html("");
//创建一个文本框
//去掉文本框的边框
//使文本框的宽度和知的宽度相同
//设置文本框中字体的大小是16px
//设置文本框的背景色
//需要将当前td中的内容放到文本框中
//将文本框插入到td中
var inputObj = $("<input type='text'/>")
.css("border-width", "0")
.css("font-size", "16px")
.css("background-color", objtd.css("background-color"))
.width(objtd.width())
.val(text).appendTo(objtd);
//文本插入之后默认选中
inputObj.get(0).select();
//文本框属于td解决在文本框上点击时不将事件传回td中
inputObj.click(function() {
return false;
});
//处理回车和esc的操作
inputObj.keyup(function(event) {
var keycode = event.which;
//处理回车情况
if (keycode == 13) {
//获取当前文本中的内容
var inputtext = $(this).val();
//将td的内容修改为文本框中的内容
objtd.html(inputtext);
}
//处理esc情况
if (keycode == 27) {
//将内容恢复成text中的内容
objtd.html(text);
}
});
});
});
在html文件中引入下面代码，调用JQuery代码：
<script type="text/javascript" src="JavaScript/EditTable.js"></script>
本节主要知识点总结：
1、table中可以包含thead 和tbody
2、表头内容可以放到th中
3、table｛｝这种写法称作标签选择器，可以对整个页面的所有table产生影响
4、table td{}这样的写法表示的是table中包含的所有td
5、可以通过border-collapse：collapse这种方式来使表格中的单元格边框合并
6、当th有背景色时，这个th属于的tr上定义的背景色会无效
7、$(function(){});是$(document).ready(function(){});的简化写法
8、$("tbody tr")可以返回tbody中的所有tr节点
9、$("tbody tr:even")可以返回tbody中所有索引值是偶数的tr节点。odd匹配所有索引值为奇数的元素，从 0 开始计数
10、.css方法可以用于设定或获取css节点的css属性，参数名是css的属性名
11、JQuery的对象内容包含着选择器对应的DOM节点，以数组形式进行保存
12、get方法可以获取得JQuery对象中包含的某一个DOM节点
13、function中的this代表执行这个function的对象
14、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象
15、children方法可以获得某个节点的子节点，可以制定参数限制子节点的内容
16、如果选择器返回的JQuery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时，所有的DOM节点都会用于该事件
17、html方法可以用于获取或设置节点的HTML内容
18、val方法可以获取或设置节点的value值
19、$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象。
20、JQuery大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写JQuery代码
21、width方法可以设置或获取某个节点的宽度
22、appebdTo方法可以将一个节点追加到另一个节点的所有子节点的后面
23、阻止事件传递可以让当前节点的事件返回false
24、trigger方法可以触发某个javascript的事件发生。
25、JQuery中某个事件方法的参数活function上可以定义一个event参数。JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象
26、JQuery的event对象上有一个which的属性，用以获得键盘按键的值//本
27、13表示回车，27表示ESC
本实例只是实现了简单的效果，如果要与数据库之间进行交互，还有待进一步的改进。在此不在傲述！
作者：mzoy(三木)
出处：http://www.cnblogs.com/mzoylee
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
