可编辑表格

jQueryEdit.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>itcast.cn的JQuery示例：可以编辑的表格</title>
    <!--<link type="text/css" rel="stylesheet" href="css/edit.css" />-->
    <script type="text/javascript" src="../jslib/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../jslib/jqueryedit.js"></script>
</head>
<body>
<!--一个最简单的表格.一行两列，我们需要让表格中的数据点击时可以修改-->
<table border="1px">
    <tbody>
    <tr>
        <td>123123</td>
        <td>456456</td>
    </tr>
    </tbody>
</table>
</body>
</html>

jqueryedit.js

 1 //在页面装载时，让所有的td都拥有一个点击事件
 2 $(document).ready(function() {
 3     //找到所有的td节点
 4     var tds = $("td");
 5     //给所有的td节点增加点击事件
 6     tds.click(tdclick);
 7 });
 8 
 9 //td被点击的事件
10 function tdclick() {
11     //0.保存当前的td节点
12     var td = $(this);
13     //1.取出当前td中的文本内容保存起来
14     var text = td.text();
15     //2.清空td里面的内容
16     td.html("");  //也可以用td.empty();
17     //3.建立一个文本框，也就是input的元素节点
18     var input = $("<input>");
19     //4.设置文本框的值是保存起来的文本内容
20     input.attr("value", text);
21     //4.5让文本框可以响应键盘按下并弹起的事件，主要用于处理回车确认
22     input.keyup(function(event) {
23         //0.获取当前用户按下的键值
24         //解决不同浏览器获取事件对象的差异
25         var myEvent = event || window.event;
26         var kcode = myEvent.keyCode;
27         //1.判断是否是回车按下
28         if (kcode == 13) {
29             var inputnode = $(this);
30             //2.保存当前文本框的内容
31             var intputext = inputnode.val();
32             //3.清空td里面的内容
33             var tdNode = inputnode.parent();
34             //4。将保存的文本框的内容填充到td中
35             tdNode.html(intputext);
36             //5.让td重新拥有点击事件
37             tdNode.click(tdclick);
38         }
39     });
40     //5.将文本框加入到td中
41     td.append(input);  //也可以用input.appendTo(td)
42 
43     //5.5让文本框里面的文字被高亮选中
44     //需要将jquery的对象转换成dom对象
45     var inputdom = input.get(0);
46     inputdom.select();
47     //6.需要清除td上的点击事件
48     td.unbind("click");
49 }

edit.css

1 table {
2     border-collapse: collapse;
3     border: 1px solid black;
4 }