<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script>
/**
* btn :用户点击的 按钮 对象
*/
function cal(btn){
var c = btn.textContent;
if(c == '+'){
//1、获取 span 里的 数字
var span = btn.previousElementSibling;
var spanValue = span.textContent;
//2、将 span 的值 + 1 再赋值给span
spanValue = parseInt(spanValue) + 1;
span.textContent = spanValue; //为span元素设置值
//3、获取 btn 的父元素 的上一个 兄弟元素节点 里面的文本
var price = btn.parentNode.previousElementSibling.textContent;
//4、计算 小计
var money = spanValue * parseInt(price);
//5、将 小计 的金额 保存在 小计 td 中
//获取 btn 父元素 的 下一个 兄弟元素节点,改值
btn.parentNode.nextElementSibling.textContent = money;
}else{
//获取 btn 的下一个 兄弟元素 的文本 ,并且转换成整数,保存在spanValue中
var spanValue = parseInt(btn.nextElementSibling.textContent);
//获取 btn 父元素 的上一个 兄弟元素 的文本,并且转换成整数,保存在price中
var price = parseInt(btn.parentNode.previousElementSibling.textContent);
//判断如果 数量已经 为1 的时候,就不能再减,只有数量在大于1的时候才允许做 减的操作
if(spanValue > 1){
//将当前数量 - 1
spanValue = spanValue - 1;
//将更新的 数量 保存给 span
btn.nextElementSibling.textContent = spanValue;
//计算小计 :当前数量 * 当前价格
var money = spanValue * price;
//将 小计 赋值给 最后一个td
btn.parentNode.nextElementSibling.textContent = money;
}
}
//计算总计
var tbody = document.getElementById("tbl").getElementsByTagName("tbody")[0];
//获取 tbody 中所有的 tr
var trs = tbody.getElementsByTagName("tr");
var sum = 0;
//循环 所有 tr,得到 每个tr中的 最后一个td
for(var i = 0 ; i < trs.length ;i++){
var tr = trs[i];
var td = tr.lastElementChild;
sum = sum + parseInt(td.textContent);
}
document.getElementById("total").textContent = sum;
}
</script>
</head>
<body>
<table id="tbl">
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button οnclick="cal(this)">-</button>
<span>1</span>
<button οnclick="cal(this)">+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button οnclick="cal(this)">-</button>
<span>1</span>
<button οnclick="cal(this)">+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button οnclick="cal(this)">-</button>
<span>1</span>
<button οnclick="cal(this)">+</button>
</td>
<td>4488</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
</body>
</html>
类似购物车的计算
最新推荐文章于 2020-08-07 20:01:57 发布