[JS]实现点击一个单元格后对应的内容处于可编辑状【转载】

原文地址：http://topic.csdn.net/u/20080108/11/ef64d5e4-b865-4b9e-96a9-9a45518de17e.html

目前希望实现如下效果，(Web应用程序开发)

点击(最好可以实现双击后改变的效果)表格(Table)中的某个单元格，对应单元格变成可编辑状态，可以对原单元格中的内容进行修改，在对应单元格失去焦点以后对应单元格的内容从可编辑状态转变成只读状态，并显示更新后的内容。

类似的效果可以参考：随便选择一个文件，右键“属性”，在“摘要”选项卡中(如果不是“高级”状态那么首先选择高级状态)，然后可以通过点击每项信息就可以看到一个可供填写的TextBox(或者TextArea)，当焦点失去以后输入的信息就以只读的信息显示。 

代码如下：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 无标题页 </ title >
< script  language ="javascript"  type ="text/javascript" > ...
window.onload=function()
...{
  var Tb= document.getElementById("Tb");
  Tb.ondblclick=Handler;
}
function Handler(e)
...{
  e=e||event;
  var tag=e.srcElement||e.target;
  if(tag.tagName=="TABLE"||tag.tagName=="TR")
    return;
  if(tag.tagName!="TD")
    tag=tag.parentNode;
  tag.getElementsByTagName("span")[0].style.display="none"; 
  var inp=tag.getElementsByTagName("input")[0];  
  inp.onblur=function()
  ...{
    this.style.display="none";
    var sp=this.parentNode.getElementsByTagName("span")[0];
    sp.innerHTML=this.value;
    sp.style.display="";
  }
  inp.style.display="";
  inp.focus();
}
</ script >
</ head >
< body >
< table  width ='300px'  border ='1'  cellpadding ='0'  cellspacing ='2'  id ="Tb" >
< tr >< td  width ='33%' >< span > 行1列1 </ span >< input  type ="text"  value ="行1列1"   style ="display:none" /></ td >
< td  width ='33%' >< span > 行1列2 </ span >< input  type ="text"  value ="行1列2"   style ="display:none" /></ td >
< td  width ='34%' >< span > 行1列3 </ span >< input  type ="text"  value ="行1列3"   style ="display:none" /></ td ></ tr >
< tr >< td  width ='33%' >< span > 行2列1 </ span >< input  type ="text"  value ="行2列1"   style ="display:none" /></ td >
< td  width ='33%' >< span > 行2列2 </ span >< input  type ="text"  value ="行2列2"   style ="display:none" /></ td >
< td  width ='34%' >< span > 行2列3 </ span >< input  type ="text"  value ="行2列3"   style ="display:none" /></ td ></ tr >
< tr >< td  width ='33%' >< span > 行3列1 </ span >< input  type ="text"  value ="行3列1"   style ="display:none" /></ td >
< td  width ='33%' >< span > 行3列2 </ span >< input  type ="text"  value ="行3列2"   style ="display:none" /></ td >
< td  width ='34%' >< span > 行3列3 </ span >< input  type ="text"  value ="行3列3"  style ="display:none"   /></ td ></ tr >
</ table >
</ body >
</ html >