快捷導(dǎo)航

用JavaScript做簡(jiǎn)易的購(gòu)物車(chē)的代碼示例

更新時(shí)間：2017年10月20日 08:28:28 作者：Miss_差不多

這篇文章主要介紹了用JavaScript做簡(jiǎn)易的購(gòu)物車(chē)的代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

下面是我做的一個(gè)超簡(jiǎn)單的購(gòu)物車(chē),全部都是用原生js做的

css

<style>
  table{
   text-align: center;

  }
  table img{
   width: 50px;
  }
 a {
  text-decoration: none;
  color: red;
}
 </style>

body

<table border="1" cellspacing="0">
  <thead>
  <tr>
   <th>全選 <input type="checkbox" id="ckAll"/></th>
   <th>商品</th>
   <th>單價(jià)</th>
   <th>數(shù)量</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/1.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="2"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>
   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/2.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="3"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>


   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/3.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="1"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>


   </tr></tbody>
  <tfoot>
  <tr>
   <td colspan="3" align="right">總價(jià):</td>
   <td colspan="2"></td>
  </tr>
  </tfoot>

 </table>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">刪除選中項(xiàng)</a>

js

<script>
  window.onload=function(){
   document.getElementById("ckAll").onclick=function(){//當(dāng)點(diǎn)擊全選的復(fù)合框時(shí)觸發(fā)事件
    var cks = document.getElementsByName("ck");//獲取ck對(duì)象
    for(var i=0;i<cks.length;i++){ //循環(huán)得到單個(gè)tr
     cks[i].checked=this.checked; //得到的每個(gè)tr的點(diǎn)擊都等于ckAll的點(diǎn)擊
    }
   }
   var cks = document.getElementsByName("ck");//創(chuàng)建ck對(duì)象
   for(var i=0;i<cks.length;i++){ //循環(huán)得到單個(gè)tr
    cks[i].onclick=function(){ // 當(dāng)點(diǎn)擊每個(gè)當(dāng)tr的時(shí)候都會(huì)觸發(fā)點(diǎn)擊事件
      for(var i=0;i<cks.length;i++){// 循環(huán)得到單個(gè)td
       if(!cks[i].checked){ //如果單個(gè)特點(diǎn)的點(diǎn)擊等于false 就返回
        document.getElementById("ckAll").checked = false;//那么ckAll就等于false
        return;
       }
      }
     document.getElementById("ckAll").checked = true;//否則就等于true 說(shuō)明為全選狀態(tài)
    }
   }
   getSum();
    function getSum(){ //計(jì)算的方法
     var tbody = document.getElementsByTagName("tbody")[0];//創(chuàng)建tbody對(duì)象
     var sum =0;//先定義sum為0
      for(var i =0;i<tbody.children.length;i++){ //循環(huán)得到tr
       var tr = tbody.children[i]; //tbody中的子節(jié)點(diǎn)就是tr
       var td = tr.children; //tr的子節(jié)點(diǎn)是 td
       var price = parseFloat(td[2].innerText);//td的第二列是價(jià)格 得到價(jià)格
       var count = parseFloat(td[3].children[0].value); //第三列是數(shù)量
       sum+=price*count; //總和就等于價(jià)格*數(shù)量
       td[3].children[0].onblur=function(){ //當(dāng)失去焦點(diǎn)的時(shí)候觸發(fā)事件
        getSum();
       }
      }
     var tfoot = document.getElementsByTagName("tfoot")[0]; //創(chuàng)景tfoot對(duì)象
     tfoot.children[0].children[1].innerHTML =sum; //tfootd子節(jié)點(diǎn) 等于總和
    }

   var dels = document.getElementsByClassName("del");//創(chuàng)建del對(duì)象
   for(var i = 0;i<dels.length;i++){//循環(huán)得到
    dels[i].onclick=function(){
     this.parentNode.parentNode.remove();
     getSum();
    }
   }
   document.getElementsByClassName("dels")[0].onclick=function(){
     var cks = document.getElementsByName("ck");
    for(var i = cks.length-1;i>=0;i--){
      if(cks[i].checked){
       cks[i].parentNode.parentNode.remove();
      }
    }
    getSum();

   }

  }
</script>

效果圖