java学习笔记之jquery购物车3

最新推荐文章于 2024-05-03 16:12:22 发布

JustGo_ChenXi

最新推荐文章于 2024-05-03 16:12:22 发布

阅读量405

点赞数

分类专栏： java学习笔记文章标签： jquery java

本文链接：https://blog.csdn.net/JustGo_ChenXi/article/details/77296198

版权

java学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这次写的功能差不多都做到了，但是选择器的使用比较单一，用的最多的就是parent children什么的，还可以做改进，有时间再看看，先把功能做出来嘛

效果图

这是效果图
代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1{
            text-align: center;
        }
        table{
            background-color: #DDD;
            margin: 0 auto;
            width:60%;
            border: 2px solid #999;
            border-collapse:collapse;

        }

        table th,table td{
            border: 2px solid #999;
            padding:5px;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <!-- jquery的使用步骤：
    1，引入jquery
    2，使用选择器定位要操作的节点
    3，调用jQuery的方法进行操作
     -->
    <script type="text/javascript">
        //添加商品的函数：
        function addProduct(obj) {
            //1获取obj父元素td所有的同胞td元素
            var tds = $(obj).parent().siblings();
            //2获取tds下要添加商品的商品名和单价信息
            var productName = tds.eq(0).text();
            var productPrice = tds.eq(1).text();
            /*
            3创建一个要添加的商品元素，创建之前判断该商品是否已经加到购物车了
            如果已经添加过了，则数量加1
            */
            var allTr = $("tbody").eq(1).children();
            for(var i=1;i<allTr.length-1;i++){
                if(productName == (allTr.eq(i).children().eq(0).text())){
                    //获取购物车中数量+对象
                    var addObj = allTr.eq(i).children().eq(2).children().eq(2);
                    updataProduct(addObj,1);
                    aTotalPrice();
                    totalPrice();
                    return;
                }

            }
            var newTr = $(
            "<tr><td>"+productName+"</td><td>"+productPrice+"</td>                                                                         <td>                                                                                                  <input type='button' value='-' 
onclick='updataProduct(this,-1)'/>                                 <input type='text' value='1' readonly/>                                                      <input type='button' value='+' onclick='updataProduct(this,1)'/>                            </td>                                                                                           <td>"+productPrice+"</td>                                                                       <td>                                                                                                <input type='button' value='移除商品' onclick='deleteProduct(this)'/>                       </td>                                                                                           </tr>"
            );
            //4获取购物车最上面一列tr元素
            var productAfterTr = $("#productAfterTr");
            //4把创建好的newTr作为兄弟元素加入最上一列的下面
            productAfterTr.after(newTr);
            //5计算一下总价
            totalPrice();

        }

        //删除商品的函数：
        function deleteProduct(obj) {
            //直接获取input父元素的父元素tr然后删除
            $(obj).parent().parent().remove();
            //计算一下总价
            totalPrice();
        }

        //更新一件商品数量的函数：这儿有点难度
        function updataProduct(obj,n) {
            //1获取当前input元素父元素的所有input子元素：
            var ins = $(obj).parent().children();
            //2获取原来的商品数量
            var count = parseInt(ins.eq(1).val());
            //3判断一下这个是是否是1
            if(count == 1 && n == -1){
                alert("商品数量最小为1");
                return;
            }
            //3更新ins元素中第二个input元素的value
            ins.eq(1).val(count+n);
            //4从新计算一下当前单件商品的总价
            aTotalPrice(obj);
            totalPrice();
        }

        //计算单价商品总价的函数：
        function aTotalPrice(obj) {
            //1获取单件商品总价的td
            var td = $(obj).parent().parent().children().eq(3);
            //2获取商品的单价和数量
            var price = parseFloat(td.parent().children().eq(1).text());
            var count = parseFloat(td.parent().children().eq(2).children().eq(1).val());
            //设置总价td中的text
            td.parent().children().eq(3).text(price*count);


        }

        //计算总价的函数：
        function totalPrice() {
            var totalPrice = 0;
            //获取购物车Table下所有tr的所有第三个td中的单价商品总金额aPrice
            var allTr = $("tbody").eq(1).children();
            //遍历所有td.text();
            for(var i=1;i<allTr.length-1;i++){
               var aTotalPrice = parseFloat(allTr.eq(i).children().eq(3).text());
                totalPrice = totalPrice+aTotalPrice;
            }
            $("#total").text(totalPrice);
        }
    </script>
</head>
<body>
    <h1>商品列表</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价（元）</th>
            <th>颜色</th>
            <th>库存</th>
            <th>加入购物车</th>
        </tr>
        <tr>
            <td>鼠标</td>
            <td>8</td>
            <td>黑色</td>
            <td>78</td>
            <td><input type="button" value="加入购物车"  onclick="addProduct(this)"/></td>
        </tr>
        <tr>
            <td>键盘</td>
            <td >90</td>
            <td>黑色</td>
            <td>78</td>
            <td><input type="button" value="加入购物车"  onclick="addProduct(this)"/></td>
        </tr>
        <tr>
            <td>手机</td>
            <td>678</td>
            <td>黑色</td>
            <td>70</td>
            <td><input type="button" value="加入购物车"  onclick="addProduct(this)"/></td>
        </tr>
        <tr>
            <td>耳机</td>
            <td>78</td>
            <td>黑色</td>
            <td>8</td>
            <td><input type="button" value="加入购物车"  onclick="addProduct(this)"/></td>
        </tr>
        <tr>
            <td>U盘</td>
            <td>7</td>
            <td>黑色</td>
            <td>78</td>
            <td><input type="button" value="加入购物车"  onclick="addProduct(this)"/></td>
        </tr>
    </table>
    <h1>购物车</h1>
    <table>
        <tr id="productAfterTr">
            <th>商品</th>
            <th>单价（元）</th>
            <th>数量</th>
            <th>金额（元）</th>
            <th>删除</th>         
        </tr>
        <tr>
            <td colspan="3">总计</td>
            <td id="total">0</td>
            <td></td>
        </tr>

    </table>
</body>
</html>

JustGo_ChenXi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
java学习笔记之jquery购物车3

这次写的功能差不多都做到了，但是选择器的使用比较单一，用的最多的就是parent children什么的，还可以做改进，有时间再看看，先把功能做出来嘛代码：<!DOCTYPE HTML><html><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="te
复制链接

扫一扫