首页 > 网络编程 > JavaScript > javascript技巧 > 双击表格实现文本输入效果 js实现双击单元格变成文本输入框效果代码 2008-04-25 15:27:29 作者： 单击单元格，即可将其变为文本框，方便编辑测试 <!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> <script language="javascript"> // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"; txt.setAttribute("className","text"); obj.appendChild(txt); txt.select(); //obj.style.border = "1px dashed #ff9900"; } // 取消单元格中的文本框，并将文本框中的值赋给单元格 function cancel(obj) { var txtValue = document.getElementById("_text_000000000_").value; obj.innerText = txtValue; } /*********************************************/ // 事件 document.ondblclick = function() { if (event.srcElement.tagName.toLowerCase() == "td") { changeTotext(event.srcElement); } } document.onmouseup = function() { if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_") { var obj = document.getElementById("_text_000000000_").parentElement; cancel(obj); } } </script> </head> <body> <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td>dblclick</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:Js实现双击鼠标自动滚动屏幕的示例代码js实现双击图片放大单击缩小的方法JS实现鼠标单击与双击事件共存js jq 单击和双击区分示例介绍js修改table中Td的值(定义td的双击事件)jquery.jstree 增加节点的双击事件代码JS实现的页面自定义滚动条效果js控制多图左右滚动切换效果代码分享JS实现双击屏幕滚动效果代码
