$(document).ready(function() { var tds = $("td"); tds.click(tdclick); }); function tdclick() { //找到所有的td节点 var td = $(this); //获得当前的this对应的节点的值 var text = td.text(); //清空td的内容 td.html(""); //建立一个文本框,也就是input的元素节点 var input = $("<input>"); //设置文本框的值是保存起来的文本 input.attr("value", text); //响应文本框失去焦点事件 input.blur(function(event) { var inputnode = $(this); var inputtext = inputnode.val(); var tdNode = inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); }); //响应键盘按下事件 input.keyup(function(event) { //解决不同浏览器获取事件对象的差异 var myEvent = event || window.Event; //获得键盘的keyCode var kcode = myEvent.keyCode; //判断是否是回车 if (kcode == 13) { //获得文本框,返回一个jquery对象 var inputnode = $(this); //获得文本框的值 var inputtext = inputnode.val(); //获得文本框的父节点,也就是td var tdNode = inputnode.parent(); //设置td的值为文本框取到的值 tdNode.html(inputtext); //重新拥有点击事件 tdNode.click(tdclick); } }); //将文本框加入到td中 td.append(input); //通过jquery对象获得dom对象 var inputdom = input.get(); //文本框的文本为选中状态 inputdom.select(); //清楚td上的点击事件 td.unbind("click"); }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jqueryEdit.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqueryEdit.js"></script> <link type="text/css" rel="stylesheet" href="css/jqueryEdit.css" /> </head> <body> <table> <tbody> <tr> <td>1231123</td> <td>456456</td> </tr> </tbody> </table> </body> </html>