JavaScript实现表格单元格双击编辑功能

表格单元格双击编辑实现

<!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=gb2312" /> <title>单击单元格，将其变为文本框</title> <style type="text/css"> <!-- body{font-size:12px;} td {     border-width: 1px;     border-top-style: solid;     border-right-style: none;     border-bottom-style: none;     border-left-style: solid;     text-align: center;     width: 25%;     height: 20px; } table {     border-width:1px;     border-right-style: solid;     border-bottom-style: solid;     border-top-style: none;     border-left-style: none;     border-color:#000; } .text { width: 95%;border: 1px dashed #FF9900; } --> </style>  </head> <body> <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">   <tr>     <td>dblclick</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr> </table> </body> </html> 

注意：若代码中引入了外部JavaScript文件，必须在页面完全刷新后，相关脚本才会加载并生效，否则双击编辑功能可能无法执行。