使用jQuery实现购物车

这篇文章主要为你们详细介绍了使用jQuery实现购物车，文中示例代码介绍的很是详细，具备必定的参考价值，感兴趣的小伙伴们能够参考一下

本文实例为你们分享了jQuery实现购物车的具体代码，供你们参考，具体内容以下

HTML代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

< body >    < div id = "goodsStore" >      < table >        < caption >储 物 仓</ caption >        < thead >          < tr >            < td >商品编号</ td >            < td >商品名称</ td >            < td >商品单价</ td >            < td >商品颜色</ td >            < td >商品库存</ td >            < td >操做</ td >          </ tr >        </ thead >        < tbody >          < tr >            < td >2018090201</ td >            < td >鼠标</ td >            < td >78</ td >            < td >黑色</ td >            < td >500</ td >            < td >              < input type = "button" value = "加入购物车" onclick = "addGoods(this);" />            </ td >          </ tr >          < tr >            < td >2018090202</ td >            < td >键盘</ td >            < td >45</ td >            < td >白色</ td >            < td >300</ td >            < td >              < input type = "button" value = "加入购物车" onclick = "addGoods(this);" />            </ td >          </ tr >          < tr >            < td >2018090203</ td >            < td >显示器</ td >            < td >880</ td >            < td >黑色</ td >            < td >200</ td >            < td >              < input type = "button" value = "加入购物车" onclick = "addGoods(this);" />            </ td >          </ tr >          < tr >            < td >2018090204</ td >            < td >主机</ td >            < td >2332</ td >            < td >蓝色</ td >            < td >350</ td >            < td >              < input type = "button" value = "加入购物车" onclick = "addGoods(this);" />            </ td >          </ tr >        </ tbody >      </ table >    </ div >    < div id = "goodsPay" >      < table >        < caption >购 物 车</ caption >        < thead >          < tr >            < td >商品编号</ td >            < td >商品名称</ td >            < td >商品单价</ td >            < td >商品颜色</ td >            < td >购买数量</ td >            < td >单项小计</ td >            < td >操做</ td >          </ tr >        </ thead >        < tbody id = "gwc" >        </ tbody >        < tfoot >          < tr >            < td colspan = "5" >总计</ td >            < td colspan = "2" id = "sum" >0</ td >          </ tr >        </ tfoot >      </ table >    </ div > </ body >

CSS代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<style>      * {        margin : 0 ;        padding : 0 ;      }      div {        width : 1000px ;        height : 350px ;        border : 3px solid #ccc ;        margin : 5px auto ;        overflow : auto ;      }      table {        border-collapse : collapse ;        width : 100% ;      }      td {        border : 1px solid black ;        text-align : center ;        height : 30px ;      }      caption {        font-size : 28px ;        font-weight : bold ;      }      #gwc input[type= "text" ] {        width : 30px ;        margin-left : 4px ;        margin-right : 4px ;      }      #gwc input[type= "button" ] {        width : 20px ;      } </style>

JavaScript代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<script src= "jquery-1.11.1/jquery.js" ></script>    <script>      var sum; //定义全局变量：购物车商品总计      $( function () {        //页面加载完成后给全局变量赋值        sum = $( "#sum" );      })      function addGoods(btn) {        var td = $(btn).parent();        var tr = $(td).parent();        var tds = $(tr).children();        //建立一个行节点        var newTr = $( "<tr></tr>" );        //给行节点赋值        newTr.html(          '<td>' + tds[0].innerHTML + '</td>' +          '<td>' + tds[1].innerHTML + '</td>' +          '<td>' + tds[2].innerHTML + '</td>' +          '<td>' + tds[3].innerHTML + '</td>' +          '<td>' +            '<input type="button" value="-" onclick="reduce(this)" />' +            '<input type="text" value="1" readonly />' +            '<input type="button" value="+" onclick="add(this)" />' +          '</td>' +          '<td>' +            tds[2].innerHTML +          '</td>' +          '<td>' +            '<input type="button" value="X" onclick="deleteGoods(this);" />' +          '</td>'        );        //追加新节点        $( "#gwc" ).append(newTr);        //更新总计        var s = parseFloat(sum.html());        sum.html(s + parseFloat(tds[2].innerHTML));      }      function add(btn) {        //获取按钮的上一个兄弟        var txt = $(btn).prev();        txt.val(parseFloat(txt.val()) + 1);        //获取该商品的单价        var price = $(btn).parent().prev().prev();        //更新总计        var s = parseFloat(sum.html());        sum.html(s + parseFloat(price.html()));      }      function reduce(btn) {        //获取按钮的下一个兄弟        var txt = $(btn).next();        if (parseFloat(txt.val()) == 1) {          return ;        }        txt.val(parseFloat(txt.val()) - 1);        //获取该商品的单价        var price = $(btn).parent().prev().prev();        //更新总计        var s = parseFloat(sum.html());        sum.html(s - parseFloat(price.html()));      }      function deleteGoods(btn) {        //获取当前行        var tr = $(btn).parent().parent();        //删除当前行        tr.remove();        //获取该商品的单价        var price = $(btn).parent().siblings().eq(2);        //更新总计        var s = parseFloat(sum.html());        sum.html(s - parseFloat(price.html()));      } </script>

最终效果

 

 以上就是本文的所有内容，但愿对你们的学习有所帮助，也但愿你们多多支持我