<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>实现购物车的相关功能</title> ???<style> ???????*{ ???????????margin:0; ???????????padding:0; ???????} ???????table{ ???????????width: 600px; ???????????border-collapse: collapse; ???????} ???????th,td{ ???????????border:1px solid #000; ???????????width: 150px; ???????????/*padding:5px 40px;*/ ???????????text-align: center; ???????} ???????#chart{ ???????????width: 800px; ???????????margin:100px auto; ???????} ???????button{ ???????????width: 20px; ???????????height: 20px; ???????} ???????thead{ ???????????background-color: aquamarine; ???????} ???????tfoot{ ???????????background-color: transparent; ???????} ???</style></head><body> ???<div id="chart"> ???????<table> ???????????<thead> ???????????????<tr> ???????????????????<th>商品名称</th> ???????????????????<th>单价</th> ???????????????????<th>数量</th> ???????????????????<th>小计</th> ???????????????</tr> ???????????</thead> ???????????<tbody> ???????????<tr> ???????????????<td>iPhone6</td> ???????????????<td>￥4488</td> ???????????????<td> ???????????????????<button onclick="calc(this)">-</button> ???????????????????<span>0</span> ???????????????????<button onclick="calc(this)">+</button> ???????????????</td> ???????????????<td> ???????????????????0 ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>iPhone7</td> ???????????????<td>￥7488</td> ???????????????<td> ???????????????????<button onclick="calc(this)">-</button> ???????????????????<span>0</span> ???????????????????<button onclick="calc(this)">+</button> ???????????????</td> ???????????????<td> ???????????????????0 ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>iPhone8</td> ???????????????<td>￥8488</td> ???????????????<td> ???????????????????<button onclick="calc(this)">-</button> ???????????????????<span>0</span> ???????????????????<button onclick="calc(this)">+</button> ???????????????</td> ???????????????<td> ???????????????????0 ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>iPhoneX</td> ???????????????<td>￥9488</td> ???????????????<td> ???????????????????<button onclick="calc(this)">-</button> ???????????????????<span>0</span> ???????????????????<button onclick="calc(this)">+</button> ???????????????</td> ???????????????<td> ???????????????????0 ???????????????</td> ???????????</tr> ???????????</tbody> ???????????<tfoot> ???????????????<tr> ???????????????????<td colspan="3" align="right">Total</td> ???????????????????<td>0.00</td> ???????????????</tr> ???????????</tfoot> ???????</table> ???</div><script src="js/jquery-3.2.1.min.js"></script><script>// ???创建函数 calc ???function calc(btn) {// ???????第一步：修改数量// ???????获得btn的父节点保存在变量td中 ???????var td=btn.parentNode; ???????console.log(td);// ???????获取td下的唯一一个span元素，保存在变量span中 ???????var span=td.querySelector("span"); ???????console.log(span);// ???????获得span的内容，保存在变量n中,并转化其string形式为number形式 ???????var n=parseInt(span.innerHTML); ???????console.log(typeof(n));// ???????判断:如果btn是+，就+1；否则，如果已经是1，就为0，否则就—1； ???????n+=btn.innerHTML=="+"?1:n==0?0:-1;// ???????设置span的内容为n ???????span.innerHTML=n;// ???????计算小计//获得td的前一个兄弟元素的内容，从？位截取，转为浮点数后，保存在变量price中 ???????var price=parseFloat(td.previousElementSibling.innerHTML.slice(1)); ???????console.log(typeof (price));// ???????设置td的后一个兄弟元素的内容为"¥"+price*n,要求小计要按2位小数四舍五入 ???????var total=td.nextElementSibling.innerHTML="¥"+price*n.toFixed(2);// ???????计算总和// ???????获得id为chart下的tbody下的每个tr下的最后一个td，保存在变量tds中 ???????var data=document.getElementById("chart"); ???????console.log(data); ???????var tds=data.querySelectorAll("tbody>tr>td:last-child"); ???????console.log(tds); ???????for(var i=0,sum=0;i<tds.length;i++){ ???????????// ???????遍历tds中每一个td，同时声明变量sum为0 ???????????sum+=parseFloat(tds[i].innerHTML.slice(1)); ???????}//遍历结束// ???????设置id为chart下的tfoot下的tr下的最后一个td的内容为:// ???????"¥"+sum.toFixed(2); ???????data.querySelector("tfoot>tr>td:last-child").innerHTML="¥"+sum.toFixed(2); ???}</script></body></html>原生js实现购物车相关功能
原文地址：http://www.cnblogs.com/yingleiming/p/7813709.html