Verwenden Sie JavaScript, um eine einfache Beispielfreigabe für Einkaufswagen zu implementieren

In diesem Artikel wird hauptsächlich das Codebeispiel für die Verwendung von JavaScript zum Erstellen eines einfachen Warenkorbs vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

CSS

<style>
  table{
   text-align: center;

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

Körper

<table border="1" cellspacing="0">
  <thead>
  <tr>
   <th>全选 <input type="checkbox" id="ckAll"/></th>
   <th>商品</th>
   <th>单价</th>
   <th>数量</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">总价:</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">删除选中项</a>

js

<script>
  window.onload=function(){
   document.getElementById("ckAll").onclick=function(){//当点击全选的复合框时触发事件
    var cks = document.getElementsByName("ck");//获取ck对象
    for(var i=0;i<cks.length;i++){ //循环得到单个tr
     cks[i].checked=this.checked; //得到的每个tr的点击都等于ckAll的点击
    }
   }
   var cks = document.getElementsByName("ck");//创建ck对象
   for(var i=0;i<cks.length;i++){ //循环得到单个tr
    cks[i].onclick=function(){ // 当点击每个当tr的时候都会触发点击事件
      for(var i=0;i<cks.length;i++){// 循环得到单个td
       if(!cks[i].checked){ //如果单个特点的点击等于false 就返回
        document.getElementById("ckAll").checked = false;//那么ckAll就等于false
        return;
       }
      }
     document.getElementById("ckAll").checked = true;//否则就等于true 说明为全选状态
    }
   }
   getSum();
    function getSum(){ //计算的方法
     var tbody = document.getElementsByTagName("tbody")[0];//创建tbody对象
     var sum =0;//先定义sum为0
      for(var i =0;i<tbody.children.length;i++){ //循环得到tr
       var tr = tbody.children[i]; //tbody中的子节点就是tr
       var td = tr.children; //tr的子节点是 td
       var price = parseFloat(td[2].innerText);//td的第二列是价格 得到价格
       var count = parseFloat(td[3].children[0].value); //第三列是数量
       sum+=price*count; //总和就等于价格*数量
       td[3].children[0].onblur=function(){ //当失去焦点的时候触发事件
        getSum();
       }
      }
     var tfoot = document.getElementsByTagName("tfoot")[0]; //创景tfoot对象
     tfoot.children[0].children[1].innerHTML =sum; //tfootd子节点 等于总和
    }

   var dels = document.getElementsByClassName("del");//创建del对象
   for(var i = 0;i<dels.length;i++){//循环得到
    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>

Rendering

Dieser Warenkorb wurde beim Erlernen von js erstellt. Er ist relativ einfach, aber die Grundfunktionen sind immer noch vorhanden:

1. Sie können alle auswählen und einzeln auswählen.

2. Sie können einzelne Elemente löschen und ausgewählte Elemente löschen.

3. Die Gesamtsumme kann sich ändern entsprechend der Menge und den Änderungen.

Es ist besser, wenn Sie den Online-Editor verwenden, um die Wirkung zu überprüfen

Wenn Sie Fragen haben, wenden Sie sich bitte an uns. Sie können jederzeit kommunizieren ... (bestanden, ich werde jQury verwenden, um in zwei Tagen ein Warenkorb-Beispiel zu erstellen)

Verwandte Empfehlungen:

WeChat-Applet-Einkaufswagen-Implementierungscode

Einfache Drag-and-Drop-Warenkorbfunktion in JS implementiert

Detaillierte Erläuterung der in angle.js implementierten Warenkorbfunktion

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um eine einfache Beispielfreigabe für Einkaufswagen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!