利用jQuery實現購物車功能
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <title>購物車----jQuery</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; } table th, table td { border:2px solid #aaa; padding:5px; } th { background-color:#eee; } </style> <script type="text/javascript" src="../js/jquery-1.11.1.js"></script> <script type="text/javascript"> function add_shoppingcart(btn){//將btn(dom)轉換為jQuery物件 //先獲取商品名字和單價還有庫存以備後面使用 var $tds = $(btn).parent().siblings(); //$tds.eq(0)是jQuery物件 $tds[0]是DOM物件 var name = $tds.eq(0).html();//string var price = $tds.eq(1).html();//string var stock = $tds.eq(3).html();//string //檢視庫存是否還有<=0 if(stock <= 0){ return; } //無論購物車中是否有該商品,庫存都要-1 $tds.eq(3).html(--stock); //在新增之前確定該商品在購物車中是否存在,若存在,則數量+1,若不存在則建立行 var $trs = $("#goods>tr"); for(var i=0;i<$trs.length;i++){ var $gtds = $trs.eq(i).children(); var gName = $gtds.eq(0).html(); if(name == gName){//若存在 var num = parseInt($gtds.eq(2).children().eq(1).val()); $gtds.eq(2).children().eq(1).val(++num);//數量+1 //金額從新計算 $gtds.eq(3).html(price*num); return;//後面程式碼不再執行 } } //若不存在,建立後追加 var li = "<tr>"+ "<td>"+name+"</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='-' onclick='decrease(this);'/> "+ "<input type='text' size='3' readonly value='1'/> "+ "<input type='button' value='+' onclick='increase(this);'/>"+ "</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='x' onclick='del(this);'/>"+ "</td>"+ "</tr>"; //追加到#goods後面 $("#goods").append($(li)); //總計功能 total(); } //輔助方法--單擊購物車中的"+" "-" "x"按鈕是找到相關商品所在td,以jQuery物件返回 function findStock(btn){ var name = $(btn).parent().siblings().eq(0).html();//獲取商品名字 //注意table預設有行分組,若此處使用 $("#table1>tr:gt(0)")則找不到任何tr var $trs = $("#table1>tbody>tr:gt(0)"); for(var i=0;i<$trs.length;i++){ var fName = $trs.eq(i).children().eq(0).html(); if(name == fName){//找到匹配的商品 return $trs.eq(i).children().eq(3); } } } //增加"+"功能 function increase(btn){ //獲取該商品庫存看是否<=0 var $stock = findStock(btn); var stock = $stock.html(); if(stock <= 0){ return; } //庫存-1 $stock.html(--stock); //購物車資料改變 var $td = $(btn).prev(); var num = parseInt($td.val());//number //num此時為number型別(在計算時會自動轉換為number型別) $td.val(++num); //獲取單價,再加計算前要先轉換為number型別 var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(num*price); //總計功能 total(); } //減少"-"功能 function decrease(btn){ //該商品數量=1時候不能再減少 var num = parseInt($(btn).next().val()); if(num <= 1){ return; } var $stock = findStock(btn); //庫存+1 var stock = $stock.html(); $stock.html(++stock); //商品數量-1 $(btn).next().val(--num); //從新計算金額 var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(price*num); //總計功能 total(); } //"x"刪除按鈕功能 function del(btn){ //將商品數量歸還庫存 var $stock = findStock(btn); var stock = parseInt($stock.html()); var num = parseInt($(btn).parent().prev().prev().children().eq(1).val()); $stock.html(num + stock); //清空改行商品列表 $(btn).parent().parent().remove(); //總計功能 total(); } //總計功能 function total(){ //獲取所有購物車中的trs var $trs = $("#goods tr"); var amount = 0; for(var i=0;i<$trs.length;i++){ var money = parseInt($trs.eq(i).children().eq(3).html()); amount += money; } //寫入總計欄 $("#total").html(amount); } </script> </head> <body> <h1>真划算</h1> <table id="table1"> <tr> <th>商品</th> <th>單價(元)</th> <th>顏色</th> <th>庫存</th> <th>好評率</th> <th>操作</th> </tr> <tr> <td>羅技M185滑鼠</td> <td>80</td> <td>黑色</td> <td>5</td> <td>98%</td> <td align="center"> <input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>微軟X470鍵盤</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"> <input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>洛克iphone6手機殼</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"> <input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>藍芽耳機</td> <td>100</td> <td>藍色</td> <td>8937</td> <td>95%</td> <td align="center"> <input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>金士頓U盤</td> <td>70</td> <td>紅色</td> <td>482</td> <td>100%</td> <td align="center"> <input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/> </td> </tr> </table> <h1>購物車</h1> <table> <thead> <tr> <th>商品</th> <th>單價(元)</th> <th>數量</th> <th>金額(元)</th> <th>刪除</th> </tr> </thead> <tbody id="goods"> </tbody> <tfoot> <tr> <td colspan="3" align="right">總計</td> <td id="total"></td> <td></td> </tr> </tfoot> </table> </body> </html>