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

您可能感兴趣的文章:

JS简单判断字符在另一个字符串中出现次数的2种常用方法
这篇文章主要介绍了JS简单判断字符在另一个字符串中出现次数的2种常用方法,结合实例形式分析了js字符串分割计算与正则操作2种实现技巧,需要的朋友可以参考下
2017-04-04
javascript 读取XML数据，在页面中展现、编辑、保存的实现
最近需要做这样一个需求，数据保存在XML里，在页面上通过表格显示其内容，可以修改内容，再保存到XML。下面把做这个东西的过程记录下来，做个笔记，也给需要的人一些帮助。
2009-10-10
JavaScript 有用的代码片段和 trick
这篇文章主要介绍了JavaScript 有用的代码片段和 trick的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-02-02
javascript闭包传参和事件的循环绑定示例探讨
按常理循环绑定事件，但是得到的结果却不是想要的，下面有个不错的示例，可以为大家详细分解下
2014-04-04
JavaScript中如何校验接口是否重复提交
这篇文章主要为大家详细介绍了在JavaScript中如何校验接口是否重复提交,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
2024-03-03
JavaScript中定义函数的三种方法
这篇文章主要介绍了JavaScript中定义函数的三种方法,本文直接给出代码实现,同时给出了构造函数的相关知识,需要的朋友可以参考下
2015-03-03
javascript计算当月剩余天数(天数计算器)示例代码
本文介绍了利用Javascript在网页上计算当前月份的剩余天数的方法，大家参考使用吧
2014-01-01
ES5 ES6中Array对象去除重复项的方法总结
这篇文章主要给大家介绍了Array对象去除重复项的相关资料，文中通过示例代码详细介绍了在ES5和ES6中Array对象去除重复项的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-04-04
微信小程序下拉列表的实现实例代码
这篇文章主要介绍了微信小程序下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
2017-03-03
JS引用传递与值传递的区别与用法分析
这篇文章主要介绍了JS引用传递与值传递的区别与用法,结合实例形式较为详细的对比分析了javascript引用传递与值传递的原理、区别、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-06-06

js实现双击单元格变成文本输入框效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具