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)};
}
}