点击单元格后可编辑单元格内文本如何制作

更新时间：2006年10月10日 00:00:00 作者：

如何通过JAVASCRIPT实现当点击相应的单元格，该单元格内文本变成可编辑的INPUT或SELECT，离开单元格后又单元格内文本为修改后文本。
我通过以下方法来实现点击单元格变成INPUT，可不知该在点其它单元格后恢复文本状态和如何返回INPUT后修改的值。是否有更好的方法来实现该效果。

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

2、

<script language="javascript"> window.attachEvent("onload", getTable); function getTable(){     for(i=0; i<tbl.cells.length; i++){         var cell = tbl.cells[i];         cell.attachEvent("onmousedown", getTexttoInput);     } } getTexttoInput = function(evt){     var input;     var html     evt = (evt) ? evt : ((window.event) ? window.event : "")     if (evt) {         var cell = (evt.target) ? evt.target : evt.srcElement;         for(i=0; i<tbl.cells.length; i++){             if(tbl.cells[i] == cell){                 html = '<input type="text" id="input'+i+'" value="' + tbl.cells[i].innerText + '" style="width:100%" onblur="this.parentNode.innerHTML=this.value;" onkeydown="if(window.event.keyCode==13){this.parentNode.innerHTML=this.value;}">'                    tbl.cells[i].innerHTML = html;            window.setTimeout('document.getElementById("input'+i+'").focus();',300);             }         }     } } </script> <table border="1" cellpadding="0" cellspacing="0" id="tbl"> <tr> <td>123</td> <td>456</td> </tr> <tr> <td>abc</td> <td>efg</td> </tr> </table>

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

点击单元格后可编辑单元格内文本如何制作

相关文章

use jscript Create a SQL Server database
use jscript Create a SQL Server database...
2007-06-06
JavaScript使用readAsDataURL读取图像文件
这篇文章主要为大家详细介绍了JavaScript使用readAsDataURL读取图像文件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
js 获取浏览器版本以此来调整CSS的样式
判断当前使用的是那个浏览器及浏览器的那个版本，根据浏览器版本来调整CSS的样式，下面是获取当前浏览器的代码,需要的朋友可以参考下
2014-06-06
一个简单的Node.js异步操作管理器分享
这篇文章主要介绍了一个简单的Node.js异步操作管理器分享,需要的朋友可以参考下
2014-04-04
JS实现静止元素自动移动示例
这篇文章主要介绍了JS实现静止元素自动移动的具体实现,需要的朋友可以参考下
2014-04-04
利用JS测试目标网站的打开响应速度
本文简单说明利用JS来测试目标网站的打开响应速度,方法简单明了大家一看就明白并附上了脚本源码
2017-12-12
javascript中将Object转换为String函数代码 (json str)
下面的代码就是想将Object转换为String函数,需要的朋友可以参考下
2012-04-04
微信小程序实现用table显示数据库反馈的多条数据功能示例
这篇文章主要介绍了微信小程序实现用table显示数据库反馈的多条数据功能,涉及微信小程序wx.request访问php后台及返回结果的显示布局相关操作技巧,需要的朋友可以参考下
2019-05-05
UNiapp 微信小程序渐变不生效的解决方案
这篇文章主要介绍了UNiapp 微信小程序渐变不生效的解决方案,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
javascript验证身份证号
这篇文章主要介绍了javascript验证身份证号,十分的详细，需要的朋友可以参考下
2015-03-03

最新评论