<!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>