<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
text-align: center;
}
</style>
</head>
<body>
<table border='1' cellspacing='0' width='500px' align='center'>
<thead>
<tr>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphonex</td>
<td>¥7999</td>
<td>
<button onclick='calc(this)'>+</button>
<span>1</span>
<button onclick='calc(this)'>-</button>
</td>
<td class='a'>¥7999</td>
</tr>
<tr>
<td>小米8</td>
<td>¥3500</td>
<td>
<button onclick='calc(this)'>+</button>
<span>1</span>
<button onclick='calc(this)'>-</button>
</td>
<td class="a">¥3500</td>
</tr>
<tr>
<td>华为p20pro</td>
<td>¥3999</td>
<td>
<button onclick='calc(this)'>+</button>
<span>1</span>
<button onclick='calc(this)'>-</button>
</td>
<td class="a">¥3999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td id='b'>¥15498</td>
</tr>
</tfoot>
</table>
<script>
function calc(btn) {
//改变数量
// 1）通过btn的父元素找到span
// 2)获取span中的值，保存在变量n中
// 3）判断btn的内容
//如果btn的内容为+，n++
//否则如果n>1,n--
// 否则n=1
var span = btn.parentElement.querySelector('span');
var n = span.innerHTML;
if(btn.innerHTML == '+') {
n++;
} else if(n > 1) {
n--;
} else {
n = 1;
}
span.innerHTML = n;
//2.让小计改变
// 1）获取单价：获取btn的父元素的前一个兄弟的内容截取掉￥
// 2）声明一个变量小计subTotal=单价*数量
// 3）btn的父元素的下一个兄弟的内容= '¥'+subTotal 保留2位小数
var price = btn.parentElement.previousElementSibling.innerHTML.slice(1);
var subTotal = price * n;
btn.parentElement.nextElementSibling.innerHTML = '¥' + subTotal.toFixed(2);
//3.求总计
// 1）找到所有的小计
// 2）遍历同时声明变量total总计
//total+=每个小计的内容截取
//遍历结束
// 3）找到tfoot中的小计的内容='¥'+total 保留两位小数
var a = document.getElementsByClassName('a');
for(var i = 0, total = 0; i < a.length; i++) {
total = total + Number(a[i].innerHTML.slice(1));
}
document.getElementById('b').innerHTML = '¥' + total.toFixed(2);
}
</script>
</body>
网友评论