需求：
頁面默認顯示的時候為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 onclick="makeInputEnabled(this)" class="editThisAttribute">
<span>
<s:label key="bean.prop" />
<s:hidden key="bean.prop" cssClass="inputTextField" />
</span>
</td>
</tr>
</table>
