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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现控制并发请求数量的方法详解
这篇文章主要为大家详细介绍了JavaScript如何实现控制并发请求数量,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
超详细的JS弹出窗口代码大全
这篇文章主要为大家分享超详细的JS弹出窗口代码大全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
JavaScript中关于for循环删除数组元素内容时出现的问题
昨天在用for循环进行数组去重的时候出现的问题小结，怎么解决这个问题呢，今天小编通过本文给大家讲解下js循环删除数组元素的方法，一起看看吧
2016-11-11
$js中判断数字\字母\中文的正则表达式 (实例)$
js中判断数字\字母\中文的正则表达式 (实例)
js中判断数字\字母\中文的正则表达式，需要的朋友可以参考下
2012-06-06
JS实现可调整倒计时间代码分享
这篇文章主要介绍了JS实现可调整倒计时间代码，效果很酷炫，也很具有实用价值，感兴趣的小伙伴们可以参考一下
2015-08-08
JavaScript的模块化:封装(闭包),继承(原型) 介绍
在复杂的逻辑下， JavaScript 需要被模块化，模块需要封装起来，只留下供外界调用的接口。闭包是 JavaScript 中实现模块封装的关键，也是很多初学者难以理解的要点
2013-07-07
解决JS请求服务器gbk文件乱码的问题
本文给大家介绍js请求服务器gbk文件乱码问题，解决办法需要设置xhr.overrideMimeType("text/csv;charset=gb2312");才正确，具体代码怎么设置，将在本文中给大家提到，需要的朋友一起学习吧
2015-10-10
javascript插件开发的一些感想和心得
这篇文章主要介绍了javascript插件开发的一些感想和心得,需要的朋友可以参考下
2016-02-02
js实现用户输入的小写字母自动转大写字母的方法
下面小编就为大家带来一篇js实现用户输入的小写字母自动转大写字母的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
JavaScript 继承详解及示例代码
本文主要介绍JavaScript 继承的知识，这里整理了详细的资料及简单示例代码，帮助大家学习参考，有兴趣的小伙伴可以参考下
2016-09-09