资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js实现双击单元格变成文本输入框效果代码
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0A%2F%2F%20%E5%B0%86%E5%8D%95%E5%85%83%E6%A0%BC%E8%BD%AC%E5%8C%96%E6%88%90%E6%96%87%E6%9C%AC%E6%A1%86%20%0D%0Afunction%20changeTotext(obj)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20tdValue%20%3D%20obj.innerText%3B%20%0D%0A%20%20%20%20obj.innerText%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20var%20txt%20%3D%20document.createElement(%22input%22)%3B%20%0D%0A%20%20%20%20txt.type%20%3D%20%22text%22%3B%20%0D%0A%20%20%20%20txt.value%20%3D%20tdValue%3B%20%0D%0A%20%20%20%20txt.id%20%3D%20%22_text_000000000_%22%3B%20%0D%0A%20%20%20%20txt.setAttribute(%22className%22%2C%22text%22)%3B%20%0D%0A%20%20%20%20obj.appendChild(txt)%3B%20%0D%0A%20%20%20%20txt.select()%3B%20%0D%0A%20%20%20%20%2F%2Fobj.style.border%20%3D%20%221px%20dashed%20%23ff9900%22%3B%20%0D%0A%7D%20%0D%0A%20%2F%2F%20%E5%8F%96%E6%B6%88%E5%8D%95%E5%85%83%E6%A0%BC%E4%B8%AD%E7%9A%84%E6%96%87%E6%9C%AC%E6%A1%86%EF%BC%8C%E5%B9%B6%E5%B0%86%E6%96%87%E6%9C%AC%E6%A1%86%E4%B8%AD%E7%9A%84%E5%80%BC%E8%B5%8B%E7%BB%99%E5%8D%95%E5%85%83%E6%A0%BC%20%0D%0Afunction%20cancel(obj)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20txtValue%20%3D%20document.getElementById(%22_text_000000000_%22).value%3B%20%0D%0A%20%20%20%20obj.innerText%20%3D%20txtValue%3B%20%0D%0A%7D%20%0D%0A%2F*********************************************%2F%20%0D%0A%2F%2F%20%E4%BA%8B%E4%BB%B6%20%0D%0Adocument.ondblclick%20%3D%20function()%20%0D%0A%7B%20%0D%0A%20%20%20%20if%20(event.srcElement.tagName.toLowerCase()%20%3D%3D%20%22td%22)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20changeTotext(event.srcElement)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%20%0D%0A%7B%20%0D%0A%20%20%20%20if%20(document.getElementById(%22_text_000000000_%22)%20%26%26%20event.srcElement.id%20!%3D%20%22_text_000000000_%22)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20obj%20%3D%20document.getElementById(%22_text_000000000_%22).parentElement%3B%20%0D%0A%20%20%20%20%20%20%20%20cancel(obj)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程