• 售前

  • 售后

热门帖子
入门百科

jquery实现购物车功能(1)

[复制链接]
音乐之家1 显示全部楼层 发表于 2021-8-14 13:56:02 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了jquery实现购物车功能的详细代码,供各人参考,详细内容如下
html
  1. ​<!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>购物车</title>
  5. <meta charset="utf-8" />
  6. <style type="text/css">
  7. h1 {
  8.     text-align: center;
  9. }
  10. table {
  11.     margin: 0 auto;
  12.     width: 60%;
  13.     border: 2px solid #aaa;
  14.     border-collapse: collapse;
  15. }
  16. table th, table td {
  17.     border: 2px solid #aaa;
  18.     padding: 5px;
  19. }
  20. th {
  21.     background-color: #eee;
  22. }
  23. </style>
  24. <script src="jquery-3.2.1.min.js"></script>
  25. <script src="gw.js"></script>
  26. </head>
  27. <body>
  28.     <h1>真划算</h1>
  29.     <table id="tb1">
  30.         <tr>
  31.             <th>商品</th>
  32.             <th>单价(元)</th>
  33.             <th>颜色</th>
  34.             <th>库存</th>
  35.             <th>好评率</th>
  36.             <th>操作</th>
  37.         </tr>
  38.         <tr>
  39.             <td>罗技M185鼠标</td>
  40.             <td>80</td>
  41.             <td>黑色</td>
  42.             <td>893</td>
  43.             <td>98%</td>
  44.             <td align="center"><input type="button" value="加入购物车"
  45.                 onclick="addshoping(this);" /></td>
  46.         </tr>
  47.         <tr>
  48.             <td>微软X470键盘</td>
  49.             <td>150</td>
  50.             <td>黑色</td>
  51.             <td>9028</td>
  52.             <td>96%</td>
  53.             <td align="center"><input type="button" value="加入购物车"
  54.                 onclick="addshoping(this);" /></td>
  55.         </tr>
  56.         <tr>
  57.             <td>洛克iphone6手机壳</td>
  58.             <td>60</td>
  59.             <td>透明</td>
  60.             <td>672</td>
  61.             <td>99%</td>
  62.             <td align="center"><input type="button" value="加入购物车"
  63.                 onclick="addshoping(this);" /></td>
  64.         </tr>
  65.         <tr>
  66.             <td>蓝牙耳机</td>
  67.             <td>100</td>
  68.             <td>蓝色</td>
  69.             <td>8937</td>
  70.             <td>95%</td>
  71.             <td align="center"><input type="button" value="加入购物车"
  72.                 onclick="addshoping(this);" /></td>
  73.         </tr>
  74.         <tr>
  75.             <td>金士顿U盘</td>
  76.             <td>70</td>
  77.             <td>红色</td>
  78.             <td>482</td>
  79.             <td>100%</td>
  80.             <td align="center"><input type="button" value="加入购物车"
  81.                 onclick="addshoping(this);" /></td>
  82.         </tr>
  83.     </table>
  84.     <h1>购物车</h1>
  85.     <table>
  86.         <thead>
  87.             <tr>
  88.                 <th>商品</th>
  89.                 <th>单价(元)</th>
  90.                 <th>数量</th>
  91.                 <th>金额(元)</th>
  92.                 <th>删除</th>
  93.             </tr>
  94.         </thead>
  95.         <tbody id="goods">
  96.         </tbody>
  97.         <tfoot>
  98.             <tr>
  99.                 <td colspan="3" align="right">总计</td>
  100.                 <td id="total"></td>
  101.                 <td></td>
  102.             </tr>
  103.         </tfoot>
  104.     </table>
  105. </body>
  106. </html>
复制代码
js
  1. //添加购物车
  2. function addshoping(btn) {
  3.         var name = $(btn).parent().siblings().eq(0).html()
  4.         var price = $(btn).parent().siblings().eq(1).html()
  5.          var trs = $("#goods tr")
  6.          var nameArr = new Array();
  7.          $.each(trs, function (index, value) {
  8.              nameArr.push($(this).children('td').eq(0).text())
  9.          })
  10.         var $tr = $('<tr>' +
  11.             '<td>' + name + '</td>' +
  12.             '<td>' + price + '</td>' +
  13.             '<td align="center">' +
  14.             '<input type="button" value="-" onclick="jian(this);"/> ' +
  15.             '<input type="number" size="3" readonly value="1"/> ' +
  16.             '<input type="button" value="+" onclick="increase(this);"/>' +
  17.             '</td>' +
  18.             '<td>' + price + '</td>' +
  19.             '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
  20.             '</tr>');
  21.         var ishasName = nameArr.indexOf(name)
  22.         
  23.         if (ishasName >= 0) {
  24.             var goodcount=trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
  25.             Number.parseInt(goodcount);
  26.             trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
  27.             var price=trs.eq(ishasName).children('td').eq(1).html()
  28.              Number.parseInt(price)
  29.              trs.eq(ishasName).children('td').eq(3).html(goodcount*price);
  30.             
  31.                
  32.         } else {
  33.            // $tr.insertAfter($("#goods tr:eq(0)"))
  34.             $("#goods").append($tr);
  35.          }
  36.             var kucun = tds.eq(3).html()
  37.    Number.parseInt(kucun)
  38.    tds.eq(3).html(--kucun)
  39.         sum()
  40.     }
  41.     //增加
  42.     function increase(btn){
  43.         var num=$(btn).prev().val()
  44.         Number.parseInt(num);
  45.         var bignew=$(btn).prev().val(++num)
  46.         var price = $(btn).parent().prev().html();
  47.         $(btn).parent().next().html(num*price);
  48.         sum();
  49.    
  50.     };
  51.     //减少
  52.     function jian(btn){
  53.         
  54.         var num=$(btn).next().val()
  55.         if(num<=1){
  56.             return;
  57.         }
  58.         Number.parseInt(--num)
  59.         var price = $(btn).parent().prev().html();
  60.         var newprice=$(btn).parent().next().html();
  61.         
  62.         $(btn).parent().next().html(newprice-price);
  63.         $(btn).next().val(num)
  64.       
  65.     sum()
  66.     }
  67.     //删除
  68.     function del(btn){
  69.        $(btn).parent().parent().remove()
  70.        sum();
  71.     }
  72.     //总和
  73.     function sum() {
  74. // 获取tbody下的所有行
  75. var $trs = $("#goods tr");
  76. // 遍历他们
  77. var sum = 0;
  78. for (var i = 0; i < $trs.length; i++) {
  79.     // 获取每一行
  80.     var $tr = $trs.eq(i);
  81.     // 获取该行中第四列的值(金额)
  82.     var mny = $tr.children().eq(3).html();
  83.     sum += parseFloat(mny);
  84. }
  85. // 写入到合计
  86. $("#total").html(sum);
  87. };
复制代码
运行结果:

以上就是本文的全部内容,盼望对各人的学习有所帮助,也盼望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作