首先还是引用css样式,和js代码 <link type="text/css" rel="stylesheet" href="css/edit.css" mce_href="css/edit.css"> <mce:script type="text/javascript" src="jslib/jquery-1.5.js" mce_src="jslib/jquery-1.5.js"></mce:script> <mce:script type="text/javascript" src="jslib/edit.js" mce_src="jslib/edit.js"></mce:script> 然后就是body里边的内容 <body> <!-- 一个简单的表格,一行两列,我们期望表格的数据一点击就可以修改 --> <table border="1px"> <tr> <td>shoubei</td> <td>shouxin</td> </tr> </table> </body> css样式代码 /*table和td都有这样的属性*/ table,td{ border-collapse: collapse; /*相邻的边框都合并*/ border: 1px solid red; } js代码 //在页面装载是让页面中的所有td都有一个点击事件 $(document).ready(function(){ //找到所有的td节点 var tds = $("td"); //给所有的td节点加上点击事件 tds.click(tdclick) }) //td被点击事件 function tdclick() { //0,保存当前td节点 var td = $(this); //1,取出当前td文本内容,保存起来 var text = $(this).text(); //2,td文本内容全部清空 td.html(""); //也可以用 td.empty(); //3,建立一个文本框的标签,也就是一个input节点 var input = $("<input>") //4,设置文本框里边的值,是原来保存起来的值 input.attr("value",text); //4-5让文本框可以响应键盘按下的事件,主要用于回车确认处理 input.keyup(function(event){ //0,获取当前用户按下的键码 //解决不同浏览器获取事件的差异 var myEvent = event || window.event; var kcode = myEvent.keyCode; //1,判断是不否是回车键按下 if(kcode==13) { var inputnode = $(this); //2,保存获取当前文本的内容 var inputtext = inputnode.val(); //3,清空td里边的内容 var tdNode = inputnode.parent(); //4,将保存文本的内容显示到td中 tdNode.html(inputtext); //5,让td重新拥有点击事件 tdNode.click(tdclick); } }) //5,将文本框加入到td里边去 td.append(input); //也可以用 input.appendTo(td) //6,可以将文本框里边的内容全部选中(需要将jquery对象转换成dom) 0:是input的索引值,因为只有一个input所以下标就是0 var inputdom = input.get(0); inputdom.select(); //(点一次可以,点第二次就坏菜了)所以需要清楚td的点击事件 td.unbind("click"); }