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">  </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>&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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

移动前端图片压缩上传的实例
下面小编就为大家分享一篇移动前端图片压缩上传的实例。具有很好的参考价值，希望对大家有所帮助。一起小编过来看看吧
2017-12-12
js中删除数组中的某一元素实例(无下标时)
下面小编就为大家带来一篇js中删除数组中的某一元素实例(无下标时)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
js编写一个简单的产品放大效果代码
这篇文章主要为大家分享了js编写一个简单的产品放大效果代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
小程序新版订阅消息模板消息
这篇文章主要介绍了小程序新版订阅消息模板消息，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
微信小程序云开发搭建一个管理小程序
这篇文章主要为大家详细介绍了微信小程序云开发，搭建一个管理小程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
uniapp实现横向滚动选择日期
这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
微信小程序自定义导航栏实例代码
这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
Bootstrap下拉菜单Dropdowns的实现代码
这篇文章主要为大家详细介绍了Bootstrap下拉菜单Dropdowns的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
自己做的模拟模态对话框实现代码
最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西
2012-05-05
JavaScript类型相关的常用操作总结
这篇文章主要给大家总结介绍了关于JavaScript类型相关的常用操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02