核心提示：DOM简易购物车实例!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleTitle/titlestyletable{border-spacing:0...
DOM简易购物车实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-spacing:0;
border:1px solid #aaa;
}
th,td{
width:100px;
border:1px solid #aaa;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥4488.00</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>¥4488.00</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥5288.00</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>¥5288.00</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥4288.00</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>¥4288.00</td>
</tr>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>¥14064.00</td>
</tr>
</tfoot>
</table>
<script>
function calc(btn){ //事件发生时，btn中自动获得点击的按钮
//修改数量
//找到当前按钮btn的父节点，保存在td中
var td=btn.parentNode;
//在td下找唯一的一个span元素，保存在span中
var span=td.getElementsByTagName("span")[0];
//取出span的内容转为数字后保存到变量n中
var n=parseInt(span.innerHTML);
//如果当前按钮的内容是+，则n++
if(btn.innerHTML==="+"){
n++;
}else if(n!=1){n--;}//否则，如果n！=1，n--
//将n写入span的内容
span.innerHTML=n;
///////计算小计/////////
//找当前td的父元素tr
var tr=td.parentNode;
//找tr下所有td，保存在变量tds中
var tds=tr.getElementsByTagName("td");
//取出tds中第二个td的内容，从1位置截取剩余字符串，转为小数，保存在price中
var price=parseFloat(tds[1].innerHTML.slice(1));
//计算price*n，保存到变量sub中
var sub=price*n;
//将“¥:”+sub.toFixed(2)写回tds中第四个td中
tds[3].innerHTML="¥"+sub.toFixed(2);
////////////////计算总计////////////////////////////////////
//按id找到table
var table=document.getElementById("data");
//找到table下的tbody
var tbody=table.getElementsByTagName("tbody")[0];
//找到tbody下的所有tr，保存在trs
var trs=tbody.getElementsByTagName("tr");
//遍历trs中每个tr，同时声明变量total=0
for(var i=0,len=trs.length,total=0;i<len;i++){
// 找到当前tr下的第四个td
var td1=trs[i].getElementsByTagName("td")[3];
// 取出td中的内容，从1位置截取剩余字符，转为小数，累加到total中
total+=parseFloat(td1.innerHTML.slice(1));
}//遍历结束后
//找到table下的所有td，保存在tds中
var tds1=table.getElementsByTagName("td");
//将“¥；”+total.toFixed（2）放入tds中最后一个td中
tds1[tds1.length-1].innerHTML="¥"+total.toFixed(2);
}
</script>
</body>
</html>
