双击单元格变为可编辑JS代码如何写|萝卜系统下载站

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

双击单元格变为可编辑

【实例描述】

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

【源码下载】

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

使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

温馨提示：喜欢本站的话，请收藏一下本站！

当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

双击单元格变为可编辑JS代码如何写

本类教程下载

系统下载排行