软件学堂

网游分类软件分类

双击单元格变为可编辑JS代码怎么写

2012-10-31 来源:网络

【实例名称】

双击单元格变为可编辑

【实例描述】

ASP.NET中提供了多个表格编辑控件,可通过双击实现单元格的编辑。本例介绍一种方法,可实现双击单元格编HTML表格的功能。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script> function editCell(obj){     if(obj.innerText==""){       obj.innerHTML="<input value='' onblur='update(this.value)'>";               //插入输入框,失去焦点时更新     }else{       obj.innerHTML="<input value="+obj.innerText+ " onblur='update(this.value)'>";//插入文本框,且指定内容     } } function update(txt){     document.getElementById("Td2").innerText=txt;  //文本框失去焦点时,需要更新表格的内容 } </script> </head> <body> <table border="1"><tr><td id="Td2" onDblClick="editCell(this)">第一行第一列</td> </tr></table></body> </html>

【运行效果】

                                                默认生成的表格

运行效果

                                              双击单元格后的表格

运行效果

【难点剖析】

本例的重点是在表格内动态添加“input”控件。因为添加的代码中有HTML语句,所以必须使用“innerHTML”属性实现“input”控件的动态插入。如果表格中已经有值,需要设置新“input”控件的“value”属性。当文本框被改变且失去焦点时,需要将文本框的内容更新回表格。本例通过“update”方法实现这种更新。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:双击单元格变为可编辑 进行本实例源码下载 

上一篇:如何设置表格的交替行颜色
下一篇:PS调色技巧:调出照片梦幻唯美暖色效果

相关文章