JQuery经典例子：页面可编辑表格
今天学习了使用JQuery实现可编辑的table 表格。把学习成果分享下。其实整个过
程很简单，没有用很多高深的函数和复杂的算法。如果对JQuery的和HTML的一些交互不
熟悉的话建议看看这篇博客《JQuery与HTML元素的获取、设置、添加、删除》
思路：
创建表格→创建文本框→将文本框放到表格的单元格→将单元格的值赋给文本框
（清除单元格）→将文本框编辑过的新值赋值给单元格。
代码：
HTML：
<span style="font-family:SimSun;font-size:24px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsEditTable.aspx.cs" Inherits="JQueryDemo.JsEditTable" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery之可以编辑的表格</title>
<link href="CSS/CssEditTable.css" rel="stylesheet" />
<script src="JS/jquery.js"></script>
<script src="JS/JSEditTable.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<thead>
<tr >
<th colspan ="2">鼠标点击表格可以编辑</th>
</tr>
</thead>
<tbody >
<tr >
<th >学号</th>
<th >姓名</th>
</tr>
<tr >
<td>0001</td>
<td>张三</td>
</tr>
<tr >
<td >0002</td>
<td >李四</td>
</tr>
<tr >
<td >0003</td>
<td >王五</td>
</tr>
<tr >
<td>0004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</span>
CSS：
<span style="font-family:SimSun;font-size:24px;">table {
/*设置body 的边框，使得页面显示出表格*/
border: 1px solid black;
/*将单元格之间的空格消去*/
border-collapse:collapse ;
width :400px;
}
table td {
border:1px solid black;
width :50%;
}
table th {
border:1px solid black;
width:50px;
}
tbody th {
background-color :#808080;
}
</span>
JS：
<span style="font-family:SimSun;font-size:24px;">//使用JavaScript来解决奇偶行背景变色的问题
$(function(){
//找到表格中所有的奇数行
$("tbody tr:even").css("background-color", "red");
//找到表格中所有的偶数行
$("tbody tr:odd").css("background-color", "green");
//找到所有学号的单元格(奇)
var numTd = $("tbody td:even");
//给单元格注册鼠标点击事件
numTd.click(function () {
//找到当鼠标点击单元格时，对应的dom 对象（单元格）
var tdObj = $(this);
if (tdObj.children("input").length > 0) {
return false;
}
//获取当前单元格的内容
var text = tdObj.html();
//创建一个文本框
var inputObj = $("<input type='text'>");
//去掉文本框的边框;设置文本框的文字大小和整体一样
inputObj.css("border-with", "0").css("font-size","16px")
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
//设置文本框的背景色
inputObj.css("background",tdObj.css("background-clor"));
//需要将当前td中的内容放入到文本框中
inputObj.val(text);
//清空td中的内容
tdObj.html("");
//将文本框插入到对应的td(单元格)中
inputObj.appendTo(tdObj);
//文本框插入后被选中
inputObj.trigger("focus").trigger("select");
//单元格触发单击事件没有任何返回值
inputObj.click(function () {
return false;
});
//处理文本框上回车和Esc事件
inputObj.keydown(function (event){
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车事件
if (keycode ==13) {
//获取当前文本框中的内容
var inputtext = inputObj.val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
return false;
}
//处理esc事件
if (keycode == 27) {
alert(inputObj.val());
alert(text);
//将单元格的内容改变成原来的内容
tdObj.html(text);
}
});
});
});</span>
效果：
技术点：
1.例子中实现了隔行换色的功能：用到了JQuery中的 even （）函数和odd（）函
数。
Even是选出元素的奇数；Odd是选出元素的偶数。
这两个函数都是从0 开始数的，也就是说一共4个元素【0、1、2、3】，其中奇
数是第二个和第四个数。
2.此外还有一个问题，就是在按enter键确定事件。在火狐或者部分浏览器中，按
enter键是一个很特别的按键，它绑定了很多事件，在你按下enter键时，它除了响应你
设定的元素行为外，还会响应改元素父节点的enter行为。这时就要屏蔽enter键，将其
返回值写成 false 就可以很简单的解决这个问题。
3.在学习过程中，我发现源码是存在问题的，我将源码复制到VS中重新生成，在按
enter快捷键确定事件时，浏览器总是会刷新表格，就算屏蔽了enter键也不管用 ，后来
去牛腩视频中翻了翻以前的学习记录，才发现源码中的判断按键的函数是 keyup事件，
牛腩是keydowm事件，改了源码以后发现，没有错误了。其实keydown 和keyup 有很多区
别的。但是有个疑问，为什么视频中使用的也是keyup事件，但没有报错呢？不得其
解。希望知道的告诉我一下。