jQuery implements shopping cart function

This article example shares the specific code of jQuery to implement the shopping cart function for your reference. The specific content is as follows

html

<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
    text-align: center;
}
 
table {
    margin: 0 auto;
    width: 60%;
    border: 2px solid #aaa;
    border-collapse: collapse;
}
 
table th, table td {
    border: 2px solid #aaa;
    padding: 5px;
}
 
th {
    background-color: #eee;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="gw.js"></script>
</head>
<body>
    <h1>What a bargain</h1>
    <table id="tb1">
        <tr>
            <th>Products</th>
            <th>Unit price (yuan)</th>
            <th>Color</th>
            <th>Inventory</th>
            <th>Positive Rate</th>
            <th>Operation</th>
        </tr>
        <tr>
            <td>Logitech M185 Mouse</td>
            <td>80</td>
            <td>Black</td>
            <td>893</td>
            <td>98%</td>
            <td align="center"><input type="button" value="Add to cart"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Microsoft X470 Keyboard</td>
            <td>150</td>
            <td>Black</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center"><input type="button" value="Add to cart"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Locke iPhone 6 case</td>
            <td>60</td>
            <td>Transparent</td>
            <td>672</td>
            <td>99%</td>
            <td align="center"><input type="button" value="Add to cart"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Bluetooth headset</td>
            <td>100</td>
            <td>Blue</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center"><input type="button" value="Add to cart"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Kingston USB flash drive</td>
            <td>70</td>
            <td>Red</td>
            <td>482</td>
            <td>100%</td>
            <td align="center"><input type="button" value="Add to cart"
                onclick="addshoping(this);" /></td>
        </tr>
    </table>
 
    <h1>Shopping Cart</h1>
    <table>
        <thead>
            <tr>
                <th>Products</th>
                <th>Unit price (yuan)</th>
                <th>Quantity</th>
                <th>Amount (Yuan)</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody id="goods">
 
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">Total</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
 
</body>
</html>

//Add shopping cart function addshoping(btn) {
 
        var name = $(btn).parent().siblings().eq(0).html()
        var price = $(btn).parent().siblings().eq(1).html()
 
         var trs = $("#goods tr")
         var nameArr = new Array();
         $.each(trs, function (index, value) {
             nameArr.push($(this).children('td').eq(0).text())
         })
        var $tr = $('<tr>' +
            '<td>' + name + '</td>' +
            '<td>' + price + '</td>' +
            '<td align="center">' +
            '<input type="button" value="-" onclick="jian(this);"/> ' +
            '<input type="number" size="3" readonly value="1"/> ' +
            '<input type="button" value="+" onclick="increase(this);"/>' +
            '</td>' +
            '<td>' + price + '</td>' +
            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
            '</tr>');
        var ishasName = nameArr.indexOf(name)
        
        if (ishasName >= 0) {
            var goodcount = trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
            Number.parseInt(goodcount);
            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
            var price=trs.eq(ishasName).children('td').eq(1).html()
             Number.parseInt(price)
             trs.eq(ishasName).children('td').eq(3).html(goodcount*price);
            
                
        } else {
 
           // $tr.insertAfter($("#goods tr:eq(0)"))
            $("#goods").append($tr);
         }
            var kucun = tds.eq(3).html()
   Number.parseInt(kucun)
   tds.eq(3).html(--kucun)
 
        sum()
    }
    //Increase function increase(btn){
        var num=$(btn).prev().val()
        Number.parseInt(num);
        var bignew=$(btn).prev().val(++num)
        var price = $(btn).parent().prev().html();
        $(btn).parent().next().html(num*price);
        sum();
    
    };
    //Reduce function jian(btn){
        
        var num = $(btn).next().val()
        if(num<=1){
            return;
        }
        Number.parseInt(--num)
        var price = $(btn).parent().prev().html();
        var newprice=$(btn).parent().next().html();
        
        $(btn).parent().next().html(newprice-price);
        $(btn).next().val(num)
      
    sum()
    }
    //delete function del(btn){
       $(btn).parent().parent().remove()
       sum();
    }
    //sum function sum() {
// Get all rows under tbody var $trs = $("#goods tr");
// loop through them var sum = 0;
for (var i = 0; i < $trs.length; i++) {
    // Get each row var $tr = $trs.eq(i);
    // Get the value of the fourth column in the row (amount)
    var mny = $tr.children().eq(3).html();
    sum += parseFloat(mny);
}
// Write to total$("#total").html(sum);
};

Running results:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery implements the addition and subtraction of multiple items in the shopping cart + total price calculation
jQuery implements the flying animation effect of adding to the shopping cart
Shopping cart function implemented by JQuery (can reduce or add items and automatically calculate prices)
How to use jQuery to calculate the price of the shopping cart
Pure jQuery to imitate Taobao shopping cart settlement
A shopping cart similar to a shopping mall based on JQuery
jQuery realizes the effect of adding and subtracting numbers in the shopping cart
jQuery+HTML5 add shopping cart code sharing
How to implement the settlement function of jquery shopping cart
jQuery implements a Taobao shopping cart-like full selection state example

<<: Implementation of FIFO in Linux process communication

>>: SQL serial number acquisition code example