java学习笔记之jquery购物车3

来源：互联网发布：java string类getchars 编辑：程序博客网时间：2024/06/14 15:50
这次写的功能差不多都做到了，但是选择器的使用比较单一，用的最多的就是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>
阅读全文
0 0