jQuery implementiert Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Implementierung der Warenkorbfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

html

<!DOCTYPE html>
<html>
<Kopf>
<title>Warenkorb</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
    Textausrichtung: zentriert;
}
 
Tisch {
    Rand: 0 automatisch;
    Breite: 60%;
    Rand: 2px durchgezogen #aaa;
    Rahmen-Zusammenbruch: Zusammenbruch;
}
 
Tabelle th, Tabelle td {
    Rand: 2px durchgezogen #aaa;
    Polsterung: 5px;
}
 
das {
    Hintergrundfarbe: #eee;
}
</Stil>
<script src="jquery-3.2.1.min.js"></script>
<script src="gw.js"></script>
</Kopf>
<Text>
    <h1>Was für ein Schnäppchen</h1>
    <Tabellen-ID="tb1">
        <tr>
            <th>Produkte</th>
            <th>Stückpreis (Yuan)</th>
            <th>Farbe</th>
            <th>Inventar</th>
            <th>Positive Bewertung</th>
            <th>Betrieb</th>
        </tr>
        <tr>
            <td>Logitech M185 Maus</td>
            <td>80</td>
            <td>Schwarz</td>
            <td>893</td>
            <td>98 %</td>
            <td align="center"><input type="button" value="Zum Warenkorb hinzufügen"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Microsoft X470-Tastatur</td>
            <td>150</td>
            <td>Schwarz</td>
            <td>9028</td>
            <td>96 %</td>
            <td align="center"><input type="button" value="Zum Warenkorb hinzufügen"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Locke iPhone 6 Hülle</td>
            <td>60</td>
            <td>Transparent</td>
            <td>672</td>
            <td>99 %</td>
            <td align="center"><input type="button" value="Zum Warenkorb hinzufügen"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Bluetooth-Headset</td>
            <td>100</td>
            <td>Blau</td>
            <td>8937</td>
            <td>95 %</td>
            <td align="center"><input type="button" value="Zum Warenkorb hinzufügen"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Kingston USB-Flash-Laufwerk</td>
            <td>70</td>
            <td>Rot</td>
            <td>482</td>
            <td>100 %</td>
            <td align="center"><input type="button" value="Zum Warenkorb hinzufügen"
                onclick="addshoping(this);" /></td>
        </tr>
    </Tabelle>
 
    <h1>Warenkorb</h1>
    <Tabelle>
        <Kopf>
            <tr>
                <th>Produkte</th>
                <th>Stückpreis (Yuan)</th>
                <th>Menge</th>
                <th>Betrag (Yuan)</th>
                <th>Löschen</th>
            </tr>
        </thead>
        <tbody id="Waren">
 
        </tbody>
        <tfuß>
            <tr>
                <td colspan="3" align="right">Gesamt</td>
                <td id="gesamt"></td>
                <td></td>
            </tr>
        </tfoot>
    </Tabelle>
 
</body>
</html>

//Einkaufswagen hinzufügen function addshoping(btn) {
 
        Variablenname = $(btn).parent().siblings().eq(0).html()
        var Preis = $(btn).parent().siblings().eq(1).html()
 
         var trs = $("#Waren tr")
         var nameArr = neues Array();
         $.each(trs, Funktion (Index, Wert) {
             nameArr.push($(dies).Kinder('td').eq(0).text())
         })
        var $tr = $('<tr>' +
            '<td>' + Name + '</td>' +
            '<td>' + Preis + '</td>' +
            '<td align="center">' +
            '<input Typ="Schaltfläche" Wert="-" onclick="jian(this);"/> ' +
            '<Eingabetyp="Zahl" Größe="3" schreibgeschützter Wert="1"/> ' +
            '<input type="button" value="+" onclick="erhöhen(dies);"/>' +
            '</td>' +
            '<td>' + Preis + '</td>' +
            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
            '</tr>');
        var ishasName = nameArr.indexOf(name)
        
        wenn (ishasName >= 0) {
            var goodcount = trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
            Nummer.parseInt(guteAnzahl);
            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
            var Preis = trs.eq (ishasName).children ('td').eq (1).html ()
             Zahl.parseInt(Preis)
             trs.eq(ishasName).children('td').eq(3).html(Warenanzahl*Preis);
            
                
        } anders {
 
           // $tr.insertAfter($("#Waren tr:eq(0)"))
            $("#Waren").anhängen($tr);
         }
            var kucun = tds.eq(3).html()
   Number.parseInt(Klick)
   tds.eq(3).html(--kucun)
 
        Summe()
    }
    //Erhöhungsfunktion increase(btn){
        var num=$(btn).prev().val()
        Zahl.parseInt(Zahl);
        var bignew=$(btn).prev().val(++num)
        var Preis = $(btn).parent().prev().html();
        $(btn).parent().next().html(Anzahl*Preis);
        Summe();
    
    };
    //Funktion jian(btn) reduzieren{
        
        var num = $(btn).next().val()
        wenn(Zahl<=1){
            zurückkehren;
        }
        Zahl.parseInt(--num)
        var Preis = $(btn).parent().prev().html();
        var neuer Preis = $ (btn).parent().next().html();
        
        $(btn).parent().next().html(neuerPreis-Preis);
        $(btn).next().val(num)
      
    Summe()
    }
    //Löschfunktion del(btn){
       $(btn).parent().parent().entfernen()
       Summe();
    }
    //Summe Funktion sum() {
// Alle Zeilen unter tbody abrufen var $trs = $("#goods tr");
// durch sie hindurchlaufen var sum = 0;
für (var i = 0; i < $trs.length; i++) {
    // Jede Zeile abrufen var $tr = $trs.eq(i);
    // Den Wert der vierten Spalte in der Zeile abrufen (Betrag)
    var mny = $tr.children().eq(3).html();
    Summe += parseFloat(mny);
}
// In total schreiben$("#total").html(sum);
};

Laufergebnisse:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

jQuery implementiert die Addition und Subtraktion mehrerer Artikel im Warenkorb + Gesamtpreisberechnung
jQuery implementiert den fliegenden Animationseffekt beim Hinzufügen zum Einkaufswagen
Warenkorbfunktion implementiert durch JQuery (kann Artikel reduzieren oder hinzufügen und Preise automatisch berechnen)
So verwenden Sie jQuery, um den Preis des Einkaufswagens zu berechnen
Reines jQuery zur Nachahmung der Taobao-Warenkorbabwicklung
Ein Einkaufswagen ähnlich einem Einkaufszentrum basierend auf JQuery
jQuery realisiert den Effekt des Addierens und Subtrahierens von Zahlen im Einkaufswagen
jQuery+HTML5 Code zum Hinzufügen eines Einkaufswagens teilen
So implementieren Sie die Abrechnungsfunktion des jQuery-Warenkorbs
jQuery implementiert ein Beispiel für einen vollständigen Auswahlstatus im Taobao-Warenkorb-Stil

<<: Implementierung von FIFO in der Linux-Prozesskommunikation

>>: Beispiel für einen SQL-Seriennummernerfassungscode