<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{margin: 0 auto;width:1200px;;border:1px seagreen solid;text-align: center;table-layout: fixed;border-collapse: collapse}
td{border:1px darkblue solid;}
</style>
</head>
<body>
<table class="tableNoe">
<tbody class="tbody">
<tr>
<td>iphone6</td>
<td>4</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td >4</td>
</tr>
<tr>
<td>iphone7</td>
<td>5</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5</td>
</tr>
<tr>
<td>iphone8</td>
<td>1</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td >1</td>
</tr>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<script>
<!-- 获取所有按钮绑定点击事件-->
var btns=document.getElementsByTagName('button');
var trs=document.getElementsByTagName('tbody')[0].children;
var total=document.getElementById('total');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function () {
if(this.innerHTML=="+"){
Subtotal(this,1);
}else {
if(this.nextElementSibling.innerHTML>0){
Subtotal(this,-1);
}
}
Total();
}
}
function Subtotal(btn,number) {
if(number==1){
var span=btn.previousElementSibling;//
}else {
var span=btn.nextElementSibling;//
}
span.innerHTML=parseInt(span.innerHTML)+number;
btn.parentNode.nextElementSibling.innerHTML=btn.parentNode.previousElementSibling.innerHTML*parseInt(span.innerHTML);//将单价*全局变量=小计
}
Total();
function Total() {
for(var i=0,num=0;i<trs.length;i++){
num+=parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML=num;
}
</script>
</body>
</html>
浙公网安备 33010602011771号