js example

<table>
<tr>
<td id="billing_${billingId}" οnmοuseοver="try{EditorMgr.toggleEditBtn(this,true);}catch(e){}" οnmοuseοut="try{EditorMgr.toggleEditBtn(this,false);}catch(e){>
<span class="normalBox">
<span class="dataPanel" id="statusDataPanel">
<s:if test="status==0">
已扣款
</s:if>
<s:if test="status==1">
未扣款
</s:if>
<s:if test="status==2">
扣费失败
</s:if>
</span>
<span title="编辑" class="editBtn" οnclick="EditorMgr.changeToEdit('statusDataPanel')">ddd</span>
</span>
<span class="editBox">
<span class="editPanel">
<select id="status" name="status">
<option value="0">已扣款</option>
<option value="1">未扣款</option>
<option value="2">扣费失败</option>
</select>
</span>
<span class="saveBtn" title="保存" οnclick=""></span>
<span class="cancelBtn" title="取消" οnclick=""></span>
</span>
</td>
</tr>
</table>


.item-field-over .normalBox .editBtn{display:inline;}
.item-field-editMode .normalBox{display:none;}
.item-field-editMode .editBox{display:inline;}
.dataPanel .editPanel{float:left;}
.editBtn .saveBtn .cancelBtn{margin:0 10px 0 5px;width:16px;height:16px;float:left;}
.editBtn{background:url(../images/btn_login.png) 10px 10px no-repeat;}
.saveBtn{background:url(../images/btn_login.png) 10px 10px no-repeat;}
.cancelBtn{background:url(../images/btn_login.png) 10px 10px no-repeat;}
.editPanel input.rejigger{height:14px;padding:0;margin:0;color:#105E8F;size:10px;}
.hidden{display:none;}
.show{display:block;}
.inline{display:inline;}


var EditorMgr=
{
options:{overCls:"item-field-over",editCls:"item-field-editMode"},
toggleEditBtn:function(tdEl,flg)
{
tdEl=$(tdEl);
if(tdEl)
{
var f=flg;
alert(f);
if(f)
{
tdEl.addClass(this.options.overCls)
}
else
{
tdEl.removeClass(this.options.overCls)
}
}
},
changeToEdit:function(id)
{
alert(id);
var tdEl=$(id);
alert(tdEl);
if(tdEl)
{
tdEl.removeClass(this.options.overCls).addClass(this.options.editCls)
}
},
changeToNormal:function(id)
{
alert(id);
var tdEl=$(id);
alert(tdEl);
if(tdEl)
{
tdEl.addClass(this.options.overCls).removeClass(this.options.editCls)
}
},
onFail:function(msg,id)
{
alert("onFailonFailonFailonFailonFail++++");
},
cancelChange:function(id)
{
alert("cancelChangecancancelChangecancelChange++++");
this.changeToNormal(id)
},
saveChange:function(id)
{
alert("saveChangesaveChangesaveChangesaveChange++++");
},
updateData:function(id,value)
{
alert("updateDataupdateDataupdateDataupdateData++++");
}
};