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

2012/10/31 20:18:57作者：佚名来源：网络

移动端

【实例名称】

双击单元格变为可编辑

【实例描述】

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”方法实现这种更新。

【源码下载】

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

标签：表格