演示地址:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>可以编辑的表格</title> <script type="text/javascript" src="../jquery.js"></script> </head> <body> <table border="1px"> <tr> <td>123123</td> <td>456456</td> </tr> </table> </body> </html><script>$(function(){ //找到所有的td节点 $("td").click(tdclick); }); function tdclick(){ var td = $(this); //1.取出当前的文本内容并且保存起来 var text = td.text(); //2. 清除当前的td内容 td.html("");//也可以用empty()方法 //3.建立一个input标签 var input = $("<input>"); //4.设置文本框里面的值是改写后的内容 input.attr("value",text); //4.5响应键盘事件，处理回车 input.keyup(function(event){ //1.判断是否回车按下 //结局不同浏览器获取时间的差异 var myEvent = event || window.event; var key = myEvent.keyCode; if(key == 13){ var inputNode = $(this); //1.保存当前文本框的内容 var inputText = inputNode.val(); //2.清空td里面的内容 inputNode.parent().html(inputText); td.click(tdclick); } }); input.blur(function(){ var inputNode = $(this); var inputText = inputNode.val(); inputNode.parent().html(inputText); td.click(tdclick); }); //5.把文本框就加入到td里面去 td.append(input); //6.需要清除td上面的点击事件 //6.5高亮数据 td.unbind("click"); //7.提取文本框里面的值 } </script> 原文地址: