原生JS實現購物車的新增刪除，以及總價計算的功能
阿新 • • 發佈：2019-02-18
add方法，傳入一個引數items。items是一個數組，陣列元素為{name:String,price:Number}。通過add方法可以在在購物車列表新增商品
bind方法，實現點選刪除，能夠刪除對應的列
同時，注意總計的商品總價應該符合邏輯計算，所有價錢應該保留小數點後2位。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table id="jsTrolley"> <thead><tr><th>名稱</th><th>價格</th><th>操作</th></tr></thead> <tbody> <tr><td>產品1</td><td>10.00</td><td><a href="javascript:void(0);">刪除</a></td></tr> <tr><td>產品2</td><td>30.20</td><td><a href="javascript:void(0);">刪除</a></td></tr> <tr><td>產品3</td><td>20.50</td><td><a href="javascript:void(0);">刪除</a></td></tr> </tbody> <tfoot><tr><th>總計</th><td colspan="2">60.70(3件商品)</td></tr></tfoot> </table> </body> <script type="text/javascript"> function add(items) { var sum = 0, num = 0, html = "", table = document.getElementById("jsTrolley"), tbody = table.getElementsByTagName("tbody")[0], tfoot = table.getElementsByTagName('tfoot')[0], tr = tbody.getElementsByTagName("tr"); price = tfoot.getElementsByTagName('td')[0]; for (var i = 0; i < tr.length; i++) { var a = tr[i].getElementsByTagName('td')[1]; sum += parseFloat(a.innerHTML); } for(var i =0;i<items.length;i++){ sum += items[i].price; html += "<tr><td>"+items[i].name+"</td><td>"+items[i].price.toFixed(2)+"</td><td><a href='javascript:void(0);'>刪除</a></td></tr>"; } html = tbody.innerHTML+html; tbody.innerHTML = html; num = tbody.getElementsByTagName("tr").length; price.innerHTML = sum.toFixed(2)+"("+num+"件商品)"; } add([{name:"dd",price:11.00},{name:"ddd",price:55.0}]); function bind() { function fn(){ var node = this.parentNode.parentNode; node.parentNode.removeChild(node); var sum = 0,num=0; var tbody = document.getElementById("jsTrolley").getElementsByTagName("tbody")[0]; var tr = tbody.getElementsByTagName("tr"); for (var i = 0; i < tr.length; i++) { var a = tr[i].getElementsByTagName('td')[1]; sum += parseFloat(a.innerHTML); num++; } num = tbody.getElementsByTagName("tr").length; price.innerHTML = sum.toFixed(2)+"("+num+"件商品)"; } var del = document.getElementById("jsTrolley").getElementsByTagName("a"); for (var i = 0; i < del.length; i++) { del[i].onclick = fn; } } bind(); </script> </html>