<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <style type="text/css" media="screen"> th,td{ border:1px solid #ccc; padding:0 50px; height:30px; line-height:30px; text-align:center; } table{ border-collapse:collapse } .fl{ float:left; margin-right:10px; } i{ font-style:normal; } .gouwuche{ width:100px; height:50px; border:1px solid #ccc; margin-top:100px; position:relative; } .list{ width:610px; position:absolute; top:50px; left:0; min-height:100px; border:1px solid #ccc; } .list>div{ float:left; width:100%; height:30px; } .list>div>div{ float:left; margin-right:0; text-align:center; height:100%; width:120px; border:1px solid #ccc; } </style> </head> <body> <table style="border:1px solid #ccc"> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>商品操作</th> <th></th> </tr> <tr class="line"> <td>中裤衩</td> <td>¥300</td> <td>100</td> <td> <div class="de"> <div class="fl jian"> 减 </div> <i class="fl num">1</i> <div class="fl jia"> 加 </div> </div> </td> <td> <button type="" onclick="demo(this)" mingcheng="中裤衩" jiage="300" shuliang="100">加入购物车</button> </td> </tr> <tr class="line"> <td>小裤衩</td> <td>¥300</td> <td>100</td> <td> <div class="de"> <div class="fl jian"> 减 </div> <i class="fl num">100</i> <div class="fl jia"> 加 </div> </div> </td> <td> <button type="" onclick="demo(this)" mingcheng="小裤衩" jiage="300" shuliang="100" >加入购物车</button> </td> </tr> <tr class="line"> <td>姨妈巾</td> <td>¥10</td> <td>1000</td> <td> <div class="de"> <div class="fl jian"> 减 </div> <i class="fl num">1</i> <div class="fl jia"> 加 </div> </div> </td> <td> <button type="" onclick="demo(this)" mingcheng="姨妈巾" jiage="300" shuliang="1000" >加入购物车</button> </td> </tr> <tr class="line"> <td>奶粉</td> <td>¥10</td> <td>1000</td> <td> <div class="de"> <div class="fl jian"> 减 </div> <i class="fl num">1</i> <div class="fl jia"> 加 </div> </div> </td> <td> <button type="" onclick="demo(this)" mingcheng="奶粉" jiage="300" shuliang="1000" >加入购物车</button> </td> </tr> </table> <div class="gouwuche"> <div class="result"> 购物车商品类: <i class="log">1</i> <div class="list"> </div> </div> </div> </body> <script src="./jquery-3.1.1.min.js"></script> <script> $(".jian").click(function(){ var num=Number($(this).parent(".de").find(".num").text()); num--; if(num<0){ alert("傻逼，已经不能再减了"); return false; } $(this).parent(".de").find(".num").text(num); }) $(".jia").click(function(){ var num=Number($(this).parent(".de").find(".num").text()); num++; $(this).parent(".de").find(".num").text(num); }) function demo(obj){ var data=JSON.parse(localStorage.getItem("shangp")); var nums=$(obj).parent().parent(".line").find(".num").text();//获取所选商品的数量; var mingcheng=$(obj).attr("mingcheng");//获取商品名称 var shuliang=$(obj).attr("shuliang");//商品库存 var jiage=$(obj).attr("jiage"); //alert(jiage); var dataLIst={"nums":nums,"shuliang":shuliang,"jiage":jiage}; if(data !=""&&data !=null&&data !=undefined && data !="undefined" && JSON.stringify(data)!="{}"){ data[mingcheng]=dataLIst;// }else{ data={}; data[mingcheng]=dataLIst; } var re=JSON.stringify(data); localStorage.setItem("shangp",re); listPage(); } function listPage(){ var log=0; $(".list").html(""); var list=JSON.parse(localStorage.getItem("shangp")); console.log(list); var tip1=""; for(var i in list){ log++; //console.log(i) var jiage=list[i].jiage; var kucun=list[i].shuliang; var shuliang=list[i].nums; tip1+='<div>' +'<div>' +'商品:'+i +'</div>' +'<div>' +'价格:'+jiage +'</div>' +'<div>' +'库存:'+kucun +'</div>' +'<div>' +'所选数量:'+shuliang +'</div>' +'<div onclick="doit(this)" mingcheng='+i+'>' +'删除' +'</div>' +'</div>' } if(log==0){ tip1="购物车没有数据"; } $(".list").html(tip1) $(".log").html(log); } function doit(r){ var mingcheng=$(r).attr("mingcheng"); var data=JSON.parse(localStorage.getItem("shangp")); delete data[mingcheng]; localStorage.setItem("shangp",JSON.stringify(data)); listPage(); } $(document).ready(function(){ listPage() }) </script> </html>