js的一个简单的例子_修改table中值联动变化相关值

//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>&nbsp;
<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值