默认用Label显示数据,点击后用Text修改数据

需求：
   页面默认显示的时候为label，
   当鼠标点击上后，显示为text框，容许修改
 
     
实现
   1.javascript函数：  

//显示input框   并设置css(这里是 inputTextField )
function  makeInputEnabled(_node){
var  spans  =  _node.getElementsByTagName( " span " );
var  inputs  =  _node.getElementsByTagName( " input " );
var  labels  =  _node.getElementsByTagName( " label " );


if (spans.length  >   0 ){
    spans[ 0 ].style.padding  =   " 0px " ;
spans[ 0 ].parentNode.style.paddingTop  =   " 0px " ;
spans[ 0 ].parentNode.style.paddingBottom  =   " 0px " ;        
 }
        
if (inputs.length  >   0   &&  labels.length  >   0 ){
     labels[ 0 ].innerHTML  =   "" ;
     inputs[ 0 ].style.display  =   " block " ;
     inputs[ 0 ].focus();
     inputs[ 0 ].className  =   " inputTextField " ;
     inputs[ 0 ].type = " text " ;
            
      var  inputSize  =   10 ;
      var  inputValueLength  =  inputs[ 0 ].value.length;
     
      if (inputValueLength  >   10 ) inputSize  =  inputValueLength  +   1 ;

     inputs[ 0 ].size  =  inputSize;
            inputs[ 0 ].onblur  =   function (){
                  labels[ 0 ].appendChild(_createTextNode( this .value));
                 this .style.display = " none " ;    
    }
}

function  _createTextNode(name){
    return  document.createTextNode(name);
}

 
2. jsp页面使用(s标签为struts2标签)

< table  class = " propsReadTable " >
  <tr>
      <th>
          Monitoring Interval for High Availability (HA)
      </th>
      <td οnclick="makeInputEnabled(this)" class="editThisAttribute">
           <span>
                  <s:label key="bean.prop" />
                  <s:hidden key=" bean.prop " cssClass="inputTextField" />
            </span>
      </td>
  </tr>                   
</ table >