js implementiert ein einfaches Warenkorbmodul

<Text>
      <div id="Kopf" align="center">
        <form>
          <span class="font1">Name:</span><input type="text" id="name">
          <span class="font1">Stückpreis:</span><input type="text" id="price">
          <input id="add1" type="button" value="Hinzufügen">
          <input id="pay1" type="button" value="Zur Kasse">
          <input id="set1" type="reset" value="Zurücksetzen">
        </form>
      </div>
      <div>
        <table border="1" id="t" >
          <Kopf>
          <tr align="center">
            <td><input type="checkbox" style='cursor: pointer'></td>
            <td>Produktname</td>
            <td>Preis</td>
            <td>Menge</td>
            <td>Betrieb</td>
          </tr>
          </thead>
          <tbody>

          </tbody>
        </Tabelle>
      </div>
      <div align="right" id="b">
        <span>Gesamtpreis:</span>
        <span id="Gesamt" style="color: red">0</span>&nbsp;
        <span>Produktmenge:</span>
        <span id="Gesamtzahl" style="Farbe: rot">0</span>
      </div>
</body>

 <Stil>
        Körper{
          Hintergrundfarbe: Koralle;
        }
        #Kopf{
          Rand: 30px automatisch 10px automatisch;
        }
        #Name,#Preis{
          Hintergrundfarbe: Aquamarin;
        }
        #add1,#pay1,#set1{
          Farbe: rot;
          Schriftstärke: fett;
          Hintergrundfarbe: Gold;
          Cursor: Zeiger;
        }
        .font1{
          Schriftstärke: fett;
          Schriftgröße: groß;
        }

        #t,#b{
          Rahmen-Zusammenbruch: Zusammenbruch;
          Rand: 30px automatisch;
          Breite: 600px;
        }
        #t thead{
          Rand: 3px massives Gold;
          Farbe: weiß;
          Hintergrundfarbe: blau;
        }
        #t tbody{
          Farbe: #1414bf;
          Hintergrundfarbe: weiß;
        }
</Stil>

<script src="../lib/jquery-3.3.1.js"></script>
  <Skript>
    //Button-Funktion initialisieren initButton(){
      $("Eingabe[name=j1]").aus();
      $("Eingabe[name=x1]").aus();
      //Menge hinzufügen-Button $("input[name=j1]").on("click", function (){
             var num = parseInt($(this).prev().val());
        wenn (Zahl > 1){
          $(this).prev().prev().attr("deaktiviert",false);
        }
        wenn (Zahl > 9){
          $(this).attr("deaktiviert","deaktiviert");
          zurückkehren;
        }
             Zahl++;
             wenn (Zahl > 1){
               $(this).prev().prev().attr("deaktiviert",false);
             }
             wenn (Zahl > 9){
               $(this).attr("deaktiviert","deaktiviert");
             }
             $(diese).prev().val(num);
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
           }
      )
      //Menge verringern-Schaltfläche$($("input[name=x1]")).click(function (){
        var num = parseInt($(this).next().val());
        wenn (Zahl-1 < 10){
          $("#add1").prop("deaktiviert",false);
        }
        Nummer--;
        wenn (Zahl < 10){
          $(this).next().next().prop("deaktiviert",false);
        }
        wenn (num == 1){
          $(this).prop("deaktiviert","deaktiviert");
        }
        $(diese).nächste().val(num);
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
// Löschfunktion initialisieren initdelete(){
      $(".delete").on("klicken",function (){
        $(dies).parent().parent().entfernen();
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
//Alles auswählen oder Auswahl aller Funktionen aufheben$("thead input[type=checkbox]").on("click",function (){
     $("tbody Eingabe[Typ=Kontrollkästchen]").each(Funktion (Index,Element){
       $(this).prop("aktiviert",$("thead input[type=checkbox]").prop("aktiviert"));
       $("#Total").text(cal());
       $("#TotalNum").text(calNum());
     });
   })

    // Initialisiere jede Checkbox-Funktion initCheckBox(){
      $("tbody Eingabe[Typ=Kontrollkästchen]").aus();
      $("tbody input[type=checkbox]").on("ändern",function (){
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
    //Berechnen Sie den Gesamtpreis Funktion cal(){
      var Preis = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var priceByOne = parseFloat($(this).parent().next().next().text());
        var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val());
        var totalMoneyByOne = priceByOne * num;
        Preis + = Gesamtgeld von einem;
      });
      Rücksendepreis;
    }
    //Gesamtzahl berechnen Funktion calNum(){
      var totalNum = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val());
        Gesamtzahl+=Zahl;
      });
      Gesamtzahl zurückgeben;
    }


    //Abrechnung$("#pay1").on("click",function (){

      alert("Gesamtverbrauch: "+cal());
      $("thead input[type=checkbox]:checked").prop("checked",false);
      $("tbody Eingabe[Typ=Kontrollkästchen]:aktiviert").parent().parent().entfernen();


    });

    //Hinzufügen$("#add1").on("click",function (){
      var name = $("#name").val();
      var Preis = $("#Preis").val();
      var PreisZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
      wenn ((Name == "" || Preis == "") || (!priceZ.test(Preis)) ){
        alert("Eingabefehler!");
      }anders {
        var GameArr = [];
        var flag = falsch;
        var Wiederholung = null;
        //Holen Sie sich das Namensarray $("tbody").each(function (){
            var findet = $(this).find(".goodsName");
            für (lass i = 0; i < findet.Länge; i++) {
              GameArr.push(findet.eq(i).text());
          }
        });
        für (lass i = 0; i < GameArr.length; i++) {
          wenn (Name == GameArr[i]) {
            wiederholen = i;
            Flagge = wahr;
            brechen;
          }}
        //Wenn ein gleicher Name vorhanden ist, ändere die Menge und den Preis, wenn (flag == true){
          var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1;
          wenn (Gesamtzahl > 9){
            $(this).attr("deaktiviert","deaktiviert");
          }
          $("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum);
          $("tbody:eq(" + repeat + ")").find(".goodsPrice").text(Preis);
          //Ansonsten verkette die Tabellen}else {
        var Waren = "<tr>"+
             "<td><input type='checkbox' style='cursor: pointer'></td>"+
             "<td class='Warenname'>"+Name+"</td>"+
             "<td class='goodsPrice'>"+Preis+"</td>"+
             "<td>"+
             "<Eingabetyp='Schaltfläche' Wert='-' Name='x1' Stil='Cursor: Zeiger'>&nbsp;"+
             "<Eingabetyp='Text' Wert='1' Name='Nummer'>&nbsp;"+
             „<Eingabetyp='Schaltfläche' Wert='+' Name='j1' Stil='Cursor: Zeiger'>“
             +"</td>"+
             '<td><a href="" class=" rel="external nofollow" delete" style="color:red">Löschen</a></td>' +
             "</tr>"
        $("tbody").anhängen(Waren);
        //Nach jedem Hinzufügen das Ereignis binden initButton();
        initdelete();
        initCheckBox();
      }}
    });
</Skript>