<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> table{ border:#000 solid 1px; border-collapse:collapse; background-color:#FF0; } table td{ border:#000 solid 1px; } table th{ border:#000 solid 1px; background-color:#3CF; } .trr{ background:#F9F; } </style> <script language="javascript" src="js/jquery-1.4.2.min.js"></script> <script language="javascript"> $(document).ready(function(){ $("table tr").mouseover(function(){ $(this).addClass('trr'); }).mouseout(function(){ $(this).removeClass('trr')}); var td01 =$("table td"); td01.click(function(){ var tdObj=$(this); var text=tdObj.html(); tdObj.html(""); var inputObj=$("<input type='text' >").css("border-width","0").width(tdObj.width()).val(text).appendTo(tdObj).blur(function(){ $(this).css("background-color","#FFFF00"); }); inputObj.trigger("select"); inputObj.click(function(){return false;}); inputObj.keyup(function(event){ var keycode=event.witch; if(keycode==13){ inputtext=inputObj.val(); tdObj.html(inputtext); } if(keycode==27){ tdObj.html(text); } }); } ); }); </script> </head> <body> <table cellspacing="0"> <tr > <th colspan="2" bgcolor="#00CCFF">编号</th> </tr> <tr> <td width="212">01</td> <td width="215">奥巴马</td> </tr> <tr> <td>02</td> <td>碧昂丝</td> </tr> <tr> <td>03</td> <td>张三丰</td> </tr> <tr> <td>04</td> <td>斯威夫特</td> </tr> <tr> <td>05</td> <td>元始天尊</td> </tr> </table> </body> </html>