可编者的表格 _Web前端

可编辑的表格
<html>
	<head>
		<script type="text/javascript">
			
			function setToInput(){
				var oNode=event.srcElement;
				if(oNode.childNodes.length<1) return;
				var oInput=document.createElement("INPUT");
				oInput.type="text";	
				oInput.onblur=setToTD;
				oInput.size=5;
				oNode.appendChild(oInput);
				oInput.value=oNode.innerText;
				oNode.childNodes[0].removeNode();	
				oInput.focus();
				oInput.select();
			}
			
			function setToTD(){
					var oNode=event.srcElement;
					if(oNode.tagName=="INPUT"){
						var oValue=document.createTextNode(oNode.value);
						if(oValue&&oValue.nodeValue){
							oNode.parentNode.innerText = oValue.nodeValue;
						}else{
							oNode.parentNode.innerText = " ";
						}
						oNode.removeNode();
					}
			}				
		</script>		
	</head>
	
<body>
<h5>可编辑的表格</h5>
<table border=1>
	<tr>
		 <td height='25px' width='50px'  align='center' onclick="setToInput();">0</td>	
		 <td width='30px' onclick="setToInput();">2</td>
	</tr>	
	<tr>
		 <td onclick="setToInput();">2</td>	
		 <td onclick="setToInput();">2</td>		
	</tr>	
</table>
</body>
</html>