码上快乐

相关内容   简体   繁体

JQuery 实现 购物车页面 实现简单功能，（包括计算，删除）

本文转载自  查看原文  2019-08-09 16:35  2800 

效果图：

 

 

 

 

源代码：

 

样式设置：

<!--样式的设置-->
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            line-height: 20px;
            color: #333;
        }
        
        ul,li {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        
        a {
            color: #1965h3;
            text-decoration: none;
        }
        
        a:hover {
            color: #cd590c;
            text-decoration: underline;
        }
        
        img {
            border: 0px;
            vertical-align: middle;
        }
        
        #header {
            height: 40px;
            margin: 10px auto 10px auto;
            width: 800px;
            clear: both;
        }
        
        #nav {
            margin: 10px auto 10px auto;
            width: 800px;
            clear: both;
        }
        
        #navlist {
            width: 800px;
            margin: 0px auto 0px auto;
            height: 23px;
        }
        
        #navlist li {
            float: left;
            height: 23px;
            line-height: 26px;
        }
        
        .navlist_red_left {
            background-image: url(img/register_bg.gif);
            background-repeat: no-repeat;
            background-position: -12px -92px;
            width: 3px;
        }
        
        .navlist_red {
            background-color: #ff6600;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            width: 130px;
        }
        
        .navlist_red_arrow {
            background-color: #ff6600;
            background-image: url(img/register_bg.gif);
            background-repeat: no-repeat;
            background-position: 0px 0px;
            width: 13px;
        }
        
        .navlist_gray {
            background-color: #e4e4e4;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            width: 150px;
        }
        
        .navlist_gray_arrow {
            background-color: #e4e4e4;
            background-image: url(img/register_bg.gif);
            background-repeat: no-repeat;
            background-position: 0px 0px;
            width: 13px;
        }
        
        .navlist_gray_right {
            background-image: url(img/register_bg.gif);
            background-repeat: no-repeat;
            background-position: -12px -138px;
            width: 3px;
        }
        
        #content {
            width: 800px;
            margin: 10px auto 5px auto;
            clear: both;
        }
        
        .title_1 {
            text-align: center;
            width: 50px;
        }
        
        .title_2 {
            text-align: center;
        }
        
        .title_3 {
            text-align: center;
            width: 80px;
        }
        
        .title_4 {
            text-align: center;
            width: 80px;
        }
        
        .title_5 {
            text-align: center;
            width: 100px;
        }
        
        .title_6 {
            text-align: center;
            width: 80px;
        }
        
        .title_7 {
            text-align: center;
            width: 60px;
        }
        
        .line {
            background-color: #a7cbff;
            height: 3px;
        }
        
        .shopInfo {
            padding-left: 10px;
            height: 35px;
            vertical-align: bottom;
        }
        
        .num_input {
            border: solid 1px #666;
            width: 25px;
            height: 15px;
            text-align: center;
        }
        
        .td_1,
        .td_2,
        .td_3,
        .td_4,
        .td_5,
        .td_6,
        .td_7,
        .td_8 {
            background-color: #e2f2ff;
            border-bottom: solid 1px #d1ecff;
            border-top: solid 1px #d1ecff;
            text-align: center;
            padding: 5px;
        }
        
        .td_1,
        .td_3,
        .td_4,
        .td_5,
        .td_6,
        .td_7 {
            border-right: solid 1px #FFF;
        }
        
        .td_3 {
            text-align: left;
        }
        
        .td_4 {
            font-weight: bold;
        }
        
        .td_7 {
            font-weight: bold;
            color: #fe6400;
            font-size: 14px;
        }
        
        .hand {
            cursor: pointer;
        }
        
        .shopend {
            text-align: right;
            padding-right: 10px;
            padding-bottom: 10px;
        }
        
        .yellow {
            font-weight: bold;
            color: #FE6400;
            font-size: 18px;
        }
    </style>

jQuery 实现功能

         <!--  用Jquery 实现相应功能-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            //点击复选框全选或不全选效果
            $("#allCheckBok").click(function() {
                var checked = $(this).is(":checked");
                $(".td_1").children().attr("checked", checked);
            });

            //判断是否全选
            function Allchk() {
                var checkedB = $(".td_1").children();
                var sum = checkedB.size();
                var k = 0;
                checkedB.each(function(index, dom) {
                    if($(dom).is(":checked"))
                        k++;
                });

                if(k == sum) {
                    $("#allCheckBok").attr("checked", true);
                } else {
                    $("#allCheckBok").attr("checked", false)
                }

            }

            Allchk(); //页面加载完后运行

            //单选判断
            $(".td_1").children().click(function() {
                Allchk();
            })

            //计算总价与小计
            function prodC() {
                var $tr = $("#shopping").find("tr[id]");
                var summer = 0;
                var integral = 0;
                $tr.each(function(i, dom) {
                    var num = $(dom).children(".td_6").find("input").val(); //商品数量
                    var price = num * $(dom).children(".td_5").text(); //商品小计
                    $(dom).children(".td_7").html(price); //显示商品小计
                    summer += price; //总价
                    integral += $(dom).children(".td_4").text() * num; //积分
                });
                $("#total").text(summer);
                $("#integral").text(integral);
            }
            prodC(); //页面加载完成后运行

            //商品增加减少 ，flag 为true时增加 flag为false时减少
            function changN(dom, flag) {
                var $input = $(dom).parent().find("input");
                var value = $input.val();
                if(flag) {
                    value++;
                } else {
                    value--;
                    if(value < 0) {
                        value = 0;
                        alert("宝贝数量不能为负值")
                    }
                }
                $input.val(value);
                prodC();
            };

            //点击增加
            $(".td_6").find("img[alt='minus']").click(function() {
                changN(this, false);
            });
            //点击减少
            $(".td_6").find("img[alt='add']").click(function() {
                changN(this, true);
            });

            //点击删除
            $(".td_8").find("a").click(function() {
                $(this).parent().parent().prev().remove(); //删除前一tr
                $(this).parent().parent().remove(); //删除当前tr
                prodC();
            });
            //点击删除所选
            $("#deleteAll").click(function() {
                $("#shopping").find("tr[id]").each(function(i, e) {
                    var $tr = $(e);
                    var checked = $tr.children(".td_1").children().is(":checked");
                    if(checked) {
                        $tr.prev().remove();
                        $tr.remove();
                    }
                });
                prodC()

            });

        })
    </script>


布局

<body>
        <div id="header"><img src="img/taobao_logo.gif" alt="logo"></div>
        <div id="nav">您的位置：
            <a href="#">首页</a>&gt;
            <a href="#">我的淘宝</a>&gt;我的购物车</div>
        <div id="navlist">
            <ul>
                <li class="navlist_red_left"></li>
                <li class="navlist_red">1.查看购物车</li>
                <li class="navlist_red_arrow"></li>
                <li class="navlist_gray">2.确定订单信息</li>
                <li class="navlist_gray_arrow"></li>
                <li class="navlist_gray">3.付款到支付宝</li>
                <li class="navlist_gray_arrow"></li>
                <li class="navlist_gray">4.确定收货</li>
                <li class="navlist_gray_arrow"></li>
                <li class="navlist_gray">5.评价</li>
                <li class="navlist_gray_right"></li>
            </ul>
        </div>

        <div id="content">
            <form action="" method="post" name="myform">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" id="shopping">
                    <tr>
                        <td class="title_1"><input id="allCheckBok" type="checkbox" value="">全选</td>
                        <td class="title_2" colspan="2">店铺宝贝</td>
                        <td class="title_3">获积分</td>
                        <td class="title_4">单价（元）</td>
                        <td class="title_5">数量</td>
                        <td class="title_6">小计（元）</td>
                        <td class="title_7">操作</td>
                    </tr>

                    <tr>
                        <td colspan="8" class="line"></td>
                    </tr>

                    <tr>
                        <td colspan="8" class="shopInfo">店铺：
                            <a href="#">纤巧百媚时尚鞋坊</a> 卖家：
                            <a href="#">纤巧百媚</a><img src="img/taobao_relation.jpg"></td>
                    </tr>
                    <tr id="product1">
                        <td class="td_1"><input type="checkbox" name="cartCheckBox" value="product1"></td>
                        <td class="td_2"><img src="img/taobao_cart_01.jpg" alt="shopping" </td>
                            <td class="td_3">
                                <a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 颜色：棕色 尺码：37<br /> 保障：
                                <img src="img/taobao_icon_01.jpg" /> </td>
                            <td class="td_4">5</td>
                            <td class="td_5">138.00</td>
                            <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand"> <input type="text" id="num_1" value="1" class="num_input" readonly="readonly"> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td>
                            <td class="td_7"></td>
                            <td class="td_8">
                                <a href="javascript:void(0):">删除</a>
                            </td>
                    </tr>

                    <tr>
                        <td colspan="8" class="shopInfo">店铺：
                            <a href="#">香港我的美丽日记</a> 卖家：
                            <a href="#">lokemick2009</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
                    </tr>
                    <tr id="product2">
                        <td class="td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
                        <td class="td_2"><img src="img/taobao_cart_02.jpg" alt="shopping" /></td>
                        <td class="td_3">
                            <a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障：
                            <img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
                        <td class="td_4">12</td>
                        <td class="td_5">265.00</td>
                        <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td>
                        <td class="td_7"></td>
                        <td class="td_8">
                            <a href="javascript:void(0);">删除</a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="8" class="shopInfo">店铺：
                            <a href="#">实体经营</a> 卖家：
                            <a href="#">林颜店铺</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
                    </tr>
                    <tr id="product3">
                        <td class="td_1"><input name="cartCheckBox" type="checkbox" value="product3" /></td>
                        <td class="td_2"><img src="img/taobao_cart_03.jpg" alt="shopping" /></td>
                        <td class="td_3">
                            <a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br /> 保障：
                            <img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
                        <td class="td_4">3</td>
                        <td class="td_5">85.00</td>
                        <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td>
                        <td class="td_7"></td>
                        <td class="td_8">
                            <a href="javascript:void(0);">删除</a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="8" class="shopInfo">店铺：
                            <a href="#">红豆豆的小屋</a> 卖家：
                            <a href="#">taobao豆豆</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
                    </tr>
                    <tr id="product4">
                        <td class="td_1"><input name="cartCheckBox" type="checkbox" value="product4" /></td>
                        <td class="td_2"><img src="img/taobao_cart_04.jpg" alt="shopping" /></td>
                        <td class="td_3">
                            <a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br /> 保障：
                            <img src="img/taobao_icon_01.jpg" alt="icon" /></td>
                        <td class="td_4">12</td>
                        <td class="td_5">12.00</td>
                        <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td>
                        <td class="td_7"></td>
                        <td class="td_8">
                            <a href="javascript:void(0);">删除</a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3">
                            <a id="deleteAll" href="javascript:void(0)"><img src="img/taobao_del.jpg" alt="delete" /></a>
                        </td>
                        <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label>元<br /> 可获积分 <label class="yellow" id="integral"></label>点<br />
                            <input name="" type="image" src="img/taobao_subtn.jpg" /></td>
                    </tr>

                </table>

            </form>
        </div>

    </body>

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 jQuery实现简单购物车页面 jQuery实现购物车计算价格功能的方法 jQuery实现一个简单的购物车功能 jq实现购物车的删除功能 PHP 实现简单购物车功能（2） vue实现简单的购物车功能 php 实现简单购物车功能（2） Vue实现简单的购物车功能 购物车功能实现 jq实现简单购物车增删功能
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM