快捷導(dǎo)航

JavaScript實現(xiàn)購物車基本功能

更新時間：2017年07月21日 08:39:01 作者：yudeboo

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)購物車的基本功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript購物車最基本的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下<!DOCTYPE html>

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      table{ 
        border-collapse: collapse; 
      } 
      th{ 
        width: 80px; 
        height: 30px; 
      } 
      td{ 
        text-align: center; 
        line-height: 30px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="box"> 
      <table border="" cellspacing="" cellpadding=""> 
        <thead> 
          <th ><input type="checkbox" id="checkedAll"/>選擇</th> 
          <th>商品</th> 
          <th>價格</th> 
          <th>數(shù)量</th> 
          <th>總價</th> 
          <th>操作</th> 
        </thead> 
        <tbody id="tb"> 
          <tr> 
            <td><input type="checkbox" /></td> 
            <td>黃燜雞米飯1</td> 
            <td>10</td> 
            <td> 
              <span class="jian">-</span> 
              <input type="text" style="width: 30px;text-align: center;" value="1" readonly="readonly"/> 
              <span class="jia">+</span> 
            </td> 
            <td> 
              <span style="color: red;">10</span> 
            </td> 
            <td> 
              <a style="cursor: pointer;">刪除</a> 
            </td> 
          </tr> 
          <tr> 
            <td><input type="checkbox" /></td> 
            <td>黃燜雞米飯2</td> 
            <td>20</td> 
            <td> 
              <span class="jian">-</span> 
              <input type="text" style="width: 30px;text-align: center;"value="1" readonly="readonly"/> 
              <span class="jia">+</span> 
            </td> 
            <td> 
              <span style="color: red;">20</span> 
            </td> 
            <td> 
              <a style="cursor: pointer;">刪除</a> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
  </body> 
  <script> 
    window.onload=function(){ 
      var checkedAll=document.getElementById("checkedAll") 
      var tb=document.getElementById("tb") 
      var oinput=tb.getElementsByTagName('input') 
      var jian=document.getElementsByClassName('jian') 
      var jia=document.getElementsByClassName('jia') 
      var shanchu=tb.getElementsByTagName('a') 
      console.log(shanchu) 
       
      //全選 
      checkedAll.onclick=function(){ 
        for(var i=0;i<oinput.length;i++){ 
          oinput[i].checked=this.checked 
        } 
      } 
      //當(dāng)下級有一個沒有選中時那么全選按鈕則為false狀態(tài) 
      for(var i=0;i<oinput.length;i++){ 
        oinput[i].onclick=function(){ 
          var qx=true 
          for(var i=0;i<oinput.length;i++){ 
            if(oinput[i].checked==false){ 
              qx=false 
            } 
          } 
          checkedAll.checked=qx 
           
        } 
      } 
      checkedAll.onclick=function(){ 
        for(var i=0;i<oinput.length;i++){ 
          oinput[i].checked=this.checked 
        } 
    } 
 
    for(var i=0;i<oinput.length;i++){ 
      oinput[i].onclick=function(){ 
        var qx = true; 
        for(i=0;i<oinput.length;i++){ 
            if(oinput[i].checked==false){ 
              qx=false 
            } 
          } 
          checkedAll.checked=qx 
         
      } 
    } 
   
      //加 
      for(var i=0;i<jia.length;i++){ 
        jia[i].onclick=function(){ 
          //previousSibling上一個兄弟節(jié)點(diǎn)  
          var val = parseInt(this.previousSibling.previousSibling.value); 
          this.previousSibling.previousSibling.value = val + 1; 
          jisuan(this) 
        } 
         
      } 
      //減 
      for(var i=0;i<jian.length;i++){ 
        jian[i].onclick=function(){ 
          //nextSibling下一個兄弟節(jié)點(diǎn) 
          var val = parseInt(this.nextSibling.nextSibling.value); 
          if(val > 1) { 
            this.nextSibling.nextSibling.value = val - 1; 
          } 
          jisuan(this) 
        } 
      } 
      //操作刪除 
       
      for(var i=0;i<shanchu.length;i++){ 
        shanchu[i].onclick=function(){ 
          var conf = confirm('確定刪除這件商品嗎？'); 
          //parentNode父節(jié)點(diǎn) 
          console.log(this.parentNode.parentNode) 
          if(conf) { 
          //removeChild 刪除節(jié)點(diǎn)  
            tb.removeChild(this.parentNode.parentNode);  
          } 
        } 
      } 
       
      //總價 
      function jisuan(t){ 
        var tr=t.parentNode.parentNode  
        var result=document.getElementById("result") 
          var td=tr.getElementsByTagName('td') 
          td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value) 
      } 
    } 
  </script> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: