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”方法实现这种更新。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:双击单元格变为可编辑 进行本实例源码下载