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 }