jQuery实现简易购物车功能-今日头条

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
    <script src="js/jquery_shopping.js"></script>
</head>
<body>
    <div class="panel-group"> 
        <div class="panel panel-primary">
            <table class="table table-bordered table-striped table-hover table-condensed" id="tab_s">
                <thead> 
                    <tr class="info">
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tby">
                    <tr>
                        <td>电脑</td>
                        <td class="price">￥3999.00</td>
                        <td>
                            <div class="row">
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="sub">
                                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                                    </button>
                                </div>
                                <div class="col-md-1">
                                    <input class="form-control input-sm" type="text" name="num" value="1" placeholder="请输入数量">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="add">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="small_total">￥3999.00</td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm" name="delete">
                                <span class="glyphicon glyphicon-remove"> 删除</span>
                            </button>
                         </td>
                    </tr>

                    <tr>
                        <td>手机</td>
                        <td class="price">￥1998.00</td>
                        <td>
                            <div class="row">
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="sub">
                                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                                    </button>
                                </div>
                                <div class="col-md-1">
                                    <input class="form-control input-sm" type="text" name="num"  value="1" placeholder="请输入数量">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="add">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="small_total">￥1998.00</td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm" name="delete">
                            <span class="glyphicon glyphicon-remove"> 删除</span>
                            </button>
                        </td>
                    </tr>

                    <tr>
                        <td>空调</td>
                        <td class="price">￥2099.00</td>
                        <td>
                            <div class="row">
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="sub">
                                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                                    </button>
                                </div>
                                <div class="col-md-1">
                                    <input class="form-control input-sm" type="text" name="num" value="1" placeholder="请输入数量">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-default btn-sm" name="add">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="small_total">￥2099.00</td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm" name="delete">
                                <span class="glyphicon glyphicon-remove"> 删除</span>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer">
                <span>已选<span style="color: red;" class="num_sum">1</span>件商品</span>
                <span>总计:</span>
                <span class="sum" style="color: red;">0</span>
                <div>
                    <button type="button" class="btn btn-default btn-sm" name="delSome">
                        删除选中商品
                    </button>
                    <button type="button" class="btn btn-default btn-sm" name="delAll">
                        清空购物车
                    </button>
                    
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Js代码：

$(function(){ 
    function initTableCheckbox() { 
        var $thr = $('table thead tr');
        var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
        /*将全选/反选复选框添加到表头最前，即增加一列*/ 
        $thr.prepend($checkAllTh);
        var $checkAll = $thr.find('input');  
        $checkAll.click(function(event){  
            /*将所有行的选中状态设成全选框的选中状态*/  
            $tbr.find('input').prop('checked',$(this).prop('checked'));  
            /*并调整所有选中行的CSS样式*/  
            if ($(this).prop('checked')) {  
                $tbr.find('input').parent().parent().addClass('warning');  
            } 
            else{  
                $tbr.find('input').parent().parent().removeClass('warning');  
            }
            getSum();
            /*阻止向上冒泡，以防再次触发点击操作*/  
            event.stopPropagation();  
        });

        /*点击全选框所在单元格时也触发全选框的点击操作*/  
        $checkAllTh.click(function(){
            $(this).find('input:[type="checkbox"]').click();  
        });  
        var $tbr = $('table tbody tr');  
        var $checkItemTd = $('<td><input type="checkbox" name="checkItem" class="chk_itm"/></td>');  
        /*每一行都在最前面插入一个选中复选框的单元格*/  
        $tbr.prepend($checkItemTd);

        /*点击每一行的选中复选框时*/
        /*
        $tbr.find('input').click(function(event){  
            //调整选中行的CSS样式 
            $(this).parent().parent().toggleClass('warning');  
            //如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态
            $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);  
            //阻止向上冒泡，以防再次触发点击操作
            event.stopPropagation();  
        });  
        //点击每一行时也触发该行的选中操作 
        $tbr.click(function(){  
            $(this).find('input').click();  
        });
        */
    }  
    initTableCheckbox();

    getSum();

    $(".chk_itm").change(function() {
        getSum();
    });

   

    //添加商品
    $("button[name='add']").click(function() {
        let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
        console.log("添加商品的num:"+n);
        n++;
        $(this).parent().siblings().find("input[name='num']").val(n);

        let price = $(this).parent().parent().parent().siblings(".price").html();
        price = price.substr(1);
        console.log("添加商品的price:"+price);

        $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
        getSum();
    });

    //减少商品
    $("button[name='sub']").click(function() {
        let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
        console.log("减少商品的num:"+n);
        if (n === 1) {
         return false;
        }
        n--;
        $(this).parent().siblings().find("input[name='num']").val(n);

        let price = $(this).parent().parent().parent().siblings(".price").html();
        price = price.substr(1);
        console.log("减少商品的price:"+price);

        $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
        getSum();
    });

    $("input[name='num']").change(function() {
        let n = $(this).val();
        console.log("数量num:"+n);

        let price = $(this).parent().parent().parent().siblings(".price").html();
        price = price.substr(1);
        console.log("价格price:"+price);

        $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
        getSum();
    });

    function getSum() {
        let count = 0; //计算总件数
        let money = 0; //计算总价钱
        $("input[name='num']").each(function(index) {
            if ($(".chk_itm").eq(index).prop("checked") == true) {
                count += parseInt($("input[name='num']").eq(index).val());
                money += parseFloat($(".small_total").eq(index).text().substr(1));
            }
        });
        $(".num_sum").html(count);
        $(".sum").html(money.toFixed(2));
    }

    //点击删除之后一定是删除当前的商品，获取this
    $("button[name='delete']").click(function() {
        //删除的是当前的商品
        $(this).parent().parent().remove();
        $(".chk_itm").change();
        getSum();
        clearCheckAll();
   });

   //删除选定的商品:小的复选框如果选中就删除对应的商品
   //删除的是选中的商品
   $("button[name='delSome']").click(function() {
        //删除的是选中的商品
        $(".chk_itm:checked").parent().parent().remove();
        getSum();
        clearCheckAll();
   });

   //清空购物车
   $("button[name='delAll']").click(function() {
    $("#tby").empty();
    getSum();
    clearCheckAll();
   });

   function clearCheckAll() {
    if ($("#tby").innerText == '') {
     $(".checkAll").prop("checked", false);
    }
   }
});

效果

jQuery实现简易购物车功能

头条热榜

精彩视频