模拟购物车的实现过程（详细讲解）

我们把购物车的步骤分为了三步
一、加入购物车

二、购物车中物品数量的控制

三、计算金额

下面为实现的代码；（代码也是按照上面的思路写的大家可以看看，看不懂可以参照上面的图片上的步骤）

 !DOCTYPE html 

 html 

 head 

 title 购物车 /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" 

 //加入购物车

 //调用函数时传入this（正在点击的那个按钮）

 //声明函数来接受该值，参数名不能用关键字

 function add_shoppingcart(btn){

 console.log(btn);

 //获取此按钮的爷爷tr

 var tr = btn.parentNode.parentNode;

 console.log("tr");

 console.log(tr);

 //获取此tr的所有孩子tds

 var tds=tr.getElementsByTagName("td");

 console.log("tds");

 console.log(tds);

 //获取第0个孩子的内容（商品名）

 var spm=tds[0].innerText;

 console.log(spm);

 /* var str="";

 var ntr =document.createElement("tr");

 for (var i = 0; i i++) {

 var sp=tds[i].innerText;

 str+=" td "+sp+" /td 

 console.log(str);

 ntr.innerHTML=str;

 var tbody=document.getElementById("goods");

 tbody.appendChild(ntr); */

 //获取第一个孩子的内容（单价）

 var dj=tds[1].innerText;

 console.log(dj);

 //创建一个新的ntr

 var ntr =document.createElement("tr");

 //给这个新tr设置内容

 //ntr.innerHTML="拼td的内容";

 //其中商品名和单价拼之前获取的变量

 var str= td +spm+ /td +

  td +dj+ /td +

  td align="center" +

  input type="button" value="-" / +

  input type="text" size="3" readonly value="1"/ +

  input type="button" value="+" / +

  /td +

  td +dj+ /td +

  td align="center" input type="button" value="x" / /td ;

 ntr.innerHTML=str;

 console.log(ntr);

 //获取tbody(id="goods")

 var tbody=document.getElementById("goods");

 //向tbody下追加新tr

 tbody.appendChild(ntr); 

 sum();

 /* 删除 */

 function del(btn){

 //获取按钮的爷爷

 var tr=btn.parentNode.parentNode;

 //删除这个tr

 tr.parentNode.removeChild(tr);

 sum();

 //+操作

 function increase(btn){

 //获取按钮的父亲的孩子

 var sl=btn.parentNode.getElementsByTagName("input")[1];

 var a=parseInt(sl.value)+1;

 sl.value=a;

 //tr

 console.log("价格");

 var tr=btn.parentNode.parentNode;

 var td1=tr.getElementsByTagName("td");

 console.log(td1[1].innerText);

 console.log(a);

 var jg=a*td1[1].innerText;

 console.log(jg);

 var td3=td1[3].innerText

 console.log(td3.innerText);

 td1[3].innerText=jg;

 sum();

 function decrease(btn){

 var inputs = btn.parentNode.getElementsByTagName("input");

 var amout=inputs[1].value;

 if(amout==1){

 return;

 amout.value=--amout;

 var tr=btn.parentNode.parentNode;

 var tds=tr.getElementsByTagName("td");

 var price=tds[1].innerHTML;

 tds[3].innerHTML=price*amout;

 sum();


 td align="center" 

 input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/ 

 /td 

 /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 

 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 

 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 

 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 

 th 商品 /th 

 th 单价(元) /th 

 th 数量 /th 

 th 金额(元) /th 

 th 删除 /th 

 /tr 

 /thead 

 tbody id="goods" 

 !-- tr 

 td 罗技M185鼠标 /td 

 td 80 /td 

 td align="center" 

 input type="button" value="-"/ 

 input type="text" size="3" readonly value="1"/ 

 input type="button" value="+"/ 

 /td 

 td 80 /td 

 td align="center" input type="button" value="x"/ /td 

 /tr -- 

 /tbody 

 tfoot 

 td colspan="3" align="right" 总计 /td 

 td id="total" /td 

 td /td 

 /tr 

 /tfoot 

 /table 

 /body 

 /html