解决方案实现的效果（点击表格单元格，单元格变为可编辑状态）：
开始动手
1.创建解决方案；方案根目录下面建立css目录，存放样式文件editTable.css，建立js目录放jQuery文件和页面使用的js文件分别是jQuery.js,editTable.js,建立editTable.htm页面文件
各个文件代码如下：
View Code
1 <!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">
2 <head>
3 <title>可编辑的表格</title>
4 <script type="text/javascript" src="js/jquery.js"></script>
5 <script type="text/javascript" src="js/editTable.js"></script>
6 <link type="text/css" rel="Stylesheet" href="css/editTable.css" />
7 </head>
8 <body>
9 <table>
10 <thead>
11 <tr>
12 <th colspan="2">鼠标点击可以编辑的表格</th>
13 </tr>
14 </thead>
15 <tbody>
16 <tr>
17 <th>学号</th>
18 <th>姓名</th>
19 </tr>
20 <tr>
21 <td>0001</td>
22 <td>张三</td>
23 </tr>
24 <tr>
25 <td>0002</td>
26 <td>李四</td>
27 </tr>
28 <tr>
29 <td>0003</td>
30 <td>王五</td>
31 </tr>
32 <tr>
33 <td>0004</td>
34 <td>陈六</td>
35 </tr>
36 </tbody>
37 </table></body>
38 </html>
样式表editTable.css文件如下：
View Code
1 table{ border:1px solid black;width:300px; border-collapse:collapse;}
2 table th{border:1px solid black;}
3 table td{border:1px solid black; width:150px;}
4 tbody th{background-color:#A3BAE9;}
jQuery.cs文件是官方下载的。。
主要核心代码来了，就是editTable.js文件代码如下：
View Code
1 $(function(event) {
2 $("tbody tr:even").css("background-color", "#ECE9D8"); //填充tbody中偶数行(索引为1，3，5，...)背景颜色
3 $("tbody td:odd").click(function(event) { //注册表格偶数单元格（索引为1，3，5，....）点击事件
4 // alert("Click");//测试点击事件是否注册成功！
5 var inputObj = $("<input type='text'>"); //创建文本框
6 var tdObj = $(this); //获得当前点击的td
7
8 if (tdObj.children("input").length > 0) {//当前td中input，不执行click处理
9 return false;
10 }
11 var txt = tdObj.html(); //将当前td的内容存入变量
12 inputObj.css("border", "0"); //去掉文本框的边框
13 inputObj.css("background-color", tdObj.css("background-color")); //设置文本框背景颜色为当前td的背景颜色
14 inputObj.css("font-size", "15px"); //设置文本框字体大小16px
15 inputObj.width(tdObj.width()); //设置文本框宽度跟当前td同宽
16 tdObj.html(""); //清空td的值
17 inputObj.appendTo(tdObj); //将文本框添加到当前单元格
18 inputObj.val(txt); //将当前当前文本框的值添加到文本框
19 inputObj.get(0).focus();//将焦点设置到文本框上面
20 inputObj.get(0).select(); //让文本框里面的文字选中
21
22 inputObj.click(function(event) { //点击文本框的时候不做任何操作
23 return false;
24 });
25 });
26 });
其实这个editTable.js文件还可以精简，让代码更少，就更符合jQuery的写最少的代码做最多的事情
精简的editTable.js文件代码如下：
View Code
1 $(function(event) {
2 //找到表格的奇数行填充背景颜色
3 $("tbody tr:even").css("background-color", "#ece9d8");
4 var numTd = $("tbody td");
5 numTd.click(function(envet) {
6 //alert("click!");
7 //找到当前点击的td，这里this代表当前响应了click的td
8 var tdObj = $(this);
9 if (tdObj.children("input").length > 0) {
10 return false;
11 }
12 var txt = tdObj.html();
13 //创建文本框
14 var inputObj = $("<input type='text'/>").css("border", "none").width(tdObj.width())
15 .css("font-size", "15px").css("background-color", tdObj.css("background-color")).val(txt);
16 tdObj.html("").append(inputObj);
17 //inputObj.get(0).select();
18 inputObj.trigger("focus").trigger("select");
19 inputObj.click(function() {
20 return false;
21 });
22
23 });
24 });
附上解决方案源文件：
https://files.cnblogs.com/zwswood/EditTable.rar