//flex中绑定即可
<html>
<head><script language="javascript">
function $(id){
return document.getElementById(id);
}
function editPingguo(){
var pingguoSpan = $("pingguoSpan");
pingguoSpan.style.display='none';
var pingguoTxt = $("pingguoTxt");
pingguoTxt.style.display='inline';
pingguoTxt.select();
}
function updatePingguo(){
var pingguoSpan = $("pingguoSpan");
var pingguoTxt = $("pingguoTxt");
pingguoSpan.innerText = pingguoTxt.value;
pingguoSpan.style.display='inline';
pingguoTxt.style.display='none';
var pingguoTD = pingguoSpan.parentNode ;
var pingguoPrice = parseInt(pingguoTD.previousSibling.firstChild.nodeValue);//previousSibling指上一个兄弟节点
pingguoTD.nextSibling.firstChild.nodeValue = pingguoPrice * pingguoTxt.value;//input标签的firstChild.nodeValue指文本节点的值,只有文本节点有nodeValue,其他都为null;nextSibling指下一个兄弟节点
}
</script>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="2">
<tr>
<th>ID</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr>
<td>1</td>
<td>苹果</td>
<td>5</td>
<td>
<span id="pingguoSpan" οnmοuseοver="this.style.cursor='hand'" οnclick="editPingguo()">3</span>
<input type="text" id="pingguoTxt" style="display:none;" value="3" size="3" οnblur="updatePingguo()"/>
</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>排骨</td>
<td>18</td>
<td>2</td>
<td>36</td>
</tr>
<tr>
<td>3</td>
<td>白菜</td>
<td>1.2</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>