##css样式
```
table{
text-align:center;
border:0px solid 颜色随意n;
color:颜色随意;
}
```
##body
```
<table border='1' cellspcing='0' width='500px' align='center'>
<thead>
<tr>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品小计</th>
</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>￥7999</td>
</tr>
<tr>
<td>oppoR15</td>
<td>￥3600</td>
<td>
<button onclick='calc(this)'>+</button>
<span>1</span>
<button onclick='calc(this)'>-<button>
</td>
<td>￥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>￥3999</td>
</tr>
<tfoot>
<tr>
<td colspan='3'>总计</td
<td>￥15498</td>
</<tr>
</tfoot>
</tbody>
···
##Script
···
function calc(btn){
** 改变数量
1）通过btn的父元素找到span
var span=btn.parentElement.children[1];
2)获取span中的值，保存在变量n中
3）判断btn的内容
如果btn的内容为+，n++
否则如果n>1,n--
否则n=1**
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.求合计
var xj=document.getElementsByClassName('xj');
for(var i=0,total=0;i<xj.length;i++');{
total=total+NUmber(xj[i].innerHTML.slice(1))
};
zj.innerHTML='¥'+totabl.ToFixed(2);**
var tds=document.querySelectorAll('tbody>tr>td:last-child');
for(var i=0;totabl=0;i<tds.length;i++){
totabl+=parseFloat(td[i].innerHTML.slice(1));
}
document.querySelector('tfoot>tr>td:last-child');
innerHTML='$yen;'+total.toFixed(2);
}
```
网友评论