java学习笔记之jquery购物车2

来源：互联网发布：python 微信企业号编辑：程序博客网时间：2024/06/05 18:37
终于写好购物车2了赶快发出来

这次引入了jquery，比上次简洁多了，但是还是有问题，就是当客户加入相同的商品两次是，购物车中会出现相同的商品两次，所以在商品加入购物车之前需要判断一下购物车中是否已经加入了该商品，如果加入则把商品的数量加1
<!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>    <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创建一个要添加的商品元素：            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>
这是第三篇购物车3的链接：
http://blog.csdn.net/JustGo_ChenXi/article/details/77296198
阅读全文
0 0