使用Selector API实现购物车客户端计算

购物车客户端

1.HTML代码部分

商品名称

单价

数量

小计

iPhone6

¥4488.00

            -
            1
            +

¥4488.00

iPhone6 plus

¥5288.00

            -
            1
            +

¥5288.00

iPad Air 2

¥4288.00

            -
            1
            +

¥4288.00

总计:

¥14064.00

2.CSS样式部分

table#data{
width:600px;
table-layout: fixed;
border-collapse:collapse;
margin: 0 auto;
text-align: center;
}
table#data td,th{
border:1px solid #ddd;
}

3.Javascript部分

//1.单击按钮,做一件事
//查找id为data的table
var table=document.getElementById(“data”);
//查找table中所有的按钮
var btns=table.getElementsByTagName(“button”);
//2.绑定事件处理函数
//遍历btns中每个按钮
for(var btn of btns){
btn.onclick=function(){
//this->当前单击的btn对象
var btn=this;
//1.数量加减
var span=btn.parentNode.children[1];
//获得span的内容,将n转换为整数
var n=parseInt(span.innerHTML);
//如果btn内容为+
if(btn.innerHTML==”+”){
n++;
}else if(n>1){
n–;
}
//将最终结果保存回span内容中
span.innerHTML=n;
//2.计算小计
var td=btn.parentNode.previousElementSibling;
var price=parseFloat(td.innerHTML.slice(1));
var sum=price*n;
//获得父元素最后一个孩子的td
td.parentNode.lastElementChild.innerHTML=¥${sum.toFixed(2)};
//3.计算总价
var tds=table.querySelectorAll(“tbody>tr>td:last-child”);
var total=0;
//遍历tds,然后累加,计算total
for(var td of tds){
total+=parseFloat(td.innerHTML.slice(1));
}
//查找tfoot中最后一个td,并设置其内容为total
table.querySelector(“tfoot>tr>td:last-child”).innerHTML=¥${total.toFixed(2)};
}
}