JQ实现购物车功能

最新推荐文章于 2024-05-15 22:50:31 发布
最新推荐文章于 2024-05-15 22:50:31 发布
阅读量223 收藏
点赞数
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73758209/article/details/128972462
版权

效果图：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <script src="jq/jquery.min.js"></script>
    <script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style type="text/css">
        h1 {
          text-align:center;
        }
        table {
          margin:0 auto;
          width:60%;
          border:2px solid #aaa;
          border-collapse:collapse;
        }
        table th, table td {
          border:2px solid #aaa;
          padding:5px;
        }
        th {
          background-color:#eee;
        }
    
      </style>
</head>
<body>
    <h1>清 仓 大 甩 卖！</h1>
    <table>
        <tbody id="upGoods">
            <tr class="table-success">
                <th>商品</th>
                <th>单价(元)</th>
                <th>颜色</th>
                <th>库存</th>
                <th>好评率</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>罗技M185鼠标</td>
                <td>80</td>
                <td>黑色</td>
                <td>893</td>
                <td>98%</td>
                <td align='center'>
                    <input type='button' value='加入购物车' onclick='add_shoppingcart(this)' />
                </td>
            </tr>
            <tr>
                <td>微软X470键盘</td>
                <td>150</td>
                <td>黑色</td>
                <td>9028</td>
                <td>96%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
                </td>
            </tr>
            <tr>
                <td>洛克iphone6手机壳</td>
                <td>60</td>
                <td>透明</td>
                <td>672</td>
                <td>99%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
                </td>
            </tr>
            <tr>
                <td>蓝牙耳机</td>
                <td>100</td>
                <td>蓝色</td>
                <td>8937</td>
                <td>95%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
                </td>
            </tr>
            <tr>
                <td>金士顿U盘</td>
                <td>70</td>
                <td>红色</td>
                <td>482</td>
                <td>100%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
                </td>
            </tr>
        </tbody>
    </table>

    <h1>购 物 车</h1>
    <table>
        <thead>
            <tr class="table-success">
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods">

            <!-- <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="10"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x" onclick="deleteGoods(this)"/></td>
        </tr> -->

        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计:</td>
                <td id="total">0</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    <script>
        $(function () {
            console.log("js的外部引入")
        })

        var downTrDom = '';
        // 1.给 加入购物车 添加一个 点击事件
        function add_shoppingcart(dom) {
            var trDom = $(dom).parent().parent();
            // 拿父亲
            var goodsName = trDom.children().eq(0).text();
            //找大伯
            var goodsPrice = trDom.children().eq(1).text();
            var goodskuCun = trDom.children().eq(3).text();
            //下面是库存
            console.log("下面是库存" + goodskuCun);
            //点击加入购物车库存减少
            trDom.children().eq(3).text(--goodskuCun)

            // 2. 把 trDom 放入到 下面的 table表格的id=goods中
            // 按需要 添加
            // 编辑一个 dom 元素
            renderTr(goodsName, goodsPrice, goodsPrice, 1);

            // 1.1 遍历购物车
            var goodsTrDom = $("#goods tr");
            // 创建一个数组,用来装 产品名称
            var namesArr = new Array();
            $.each(goodsTrDom, function (index, value) {
                // 在遍历的 循环里面 去看 下面的内容和上面的内容是否有一样的.
                console.log()
                // 获取 $(this)的下面的 td
                //  把拿到名字 装入到 数组当中去
                namesArr.push($(this).children('td').eq(0).text());
            })
            console.log(namesArr);
            // 做数组是否有name的判断
            var isHasName = namesArr.indexOf(goodsName);
            // console.log(isHasName)
            if (isHasName >= 0) { // 证明下面有了
                // 1. 找出 下面数量 进行 +1  ,   上面的库存 -1 , 找出金额+单价
                // 1. 定位出来 你选择的这个购物车的 tr 
                // console.log(goodsName);
                // console.log(isHasName);
                // 拿取 goods tr 对象的下面的数量
                var goodsCount = goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val()
                var num = Number.parseInt(goodsCount) + 1;
                goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val(num); // 数量增加了
                var goodsCount1 = Number.parseInt(goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val());
                // 金额的公式 = 数量 * 单价

                console.log("下面是")
                console.log(goodsCount1)
                var tprice = goodsCount1 * goodsPrice
                console.log("下面是总价")
                console.log(tprice)
                // 清空之前的, 
                goodsTrDom.eq(isHasName).remove();
                renderTr(goodsName, goodsPrice, tprice, num)
                $("#goods").prepend(downTrDom);

                //总价
                sum();
            } else {          // 下面没有

                $("#goods").prepend(downTrDom);
                sum();
            }

        }
        // 提取一个 Tr 
        function renderTr(goodsName, goodsPrice, tprice, num) {
            console.log(num)
            downTrDom = $("<tr>"
                + " <td>" + goodsName + "</td>"
                + " <td>" + goodsPrice + "</td>"
                + " <td align='center'>"
                + "  <input onclick='sub(this)'  type='button' value='-'/>"
                + "  <input type='text' size='3' readonly value=" + num + ">"
                + "  <input onclick='add(this)'  type='button' value='+'/>"
                + "  </td>"
                + "  <td>" + tprice + "</td>"
                + " <td align='center'><input type='button' onclick='del(this)' value='x'/></td>"
                + " </tr>"
            );
        }

        function sub(dom) {
            var trDom = $(dom).parent().parent();
            console.log(trDom)
            // 拿第一个 td
            var goodsName = trDom.children().eq(0).text();
            var goodsPrice = trDom.children().eq(1).text();
            var goodsCount = trDom.children().eq(2).children().eq(1).val();
            var subCount = Number.parseInt(goodsCount) - 1;
            if (subCount == 0) {
                // 等于0 remove这个行,数组删除 名字
                trDom.remove();
                // 把数组中的名字删除
                // namesArr.pop(goodsName)
                //console.log(namesArr)

            }
            trDom.children().eq(2).children().eq(1).val(subCount);

            console.log(goodsName)
            console.log(goodsPrice)
            console.log(goodsCount)
            console.log(subCount)
            var tprice = subCount * goodsPrice;
            // 把tprice 输入到 金额中
            trDom.children().eq(3).text(tprice);

            //数量的 减少   库存进行增加
            $.each($("#upGoods tr"), function (index, value) {
                var goodsNameUp = $(this).children().eq(0).text();
                var isTrue = goodsNameUp == goodsName;
                if (isTrue) {
                    //找到了就让库存增加
                    var kucunCount = $(this).children().eq(3).text();
                    var newKucun = Number.parseInt(kucunCount) + 1;
                    $(this).children().eq(3).text(newKucun);
                }

            });

            sum();

        }


        function add(dom) {
            var trDom = $(dom).parent().parent();
            console.log(trDom)
            // 拿第一个 td
            var goodsName = trDom.children().eq(0).text();
            var goodsPrice = trDom.children().eq(1).text();
            var goodsCount = trDom.children().eq(2).children().eq(1).val();
            var subCount = Number.parseInt(goodsCount) + 1;
            if (subCount == 0) {
                // 等于0 remove这个行,数组删除 名字
                trDom.remove();
                // 把数组中的名字删除
                // namesArr.pop(goodsName)
                //console.log(namesArr)

            }
            trDom.children().eq(2).children().eq(1).val(subCount);

            console.log(goodsName)
            console.log(goodsPrice)
            console.log(goodsCount)
            console.log(subCount)
            var tprice = subCount * goodsPrice;
            // 把tprice 输入到 金额中
            trDom.children().eq(3).text(tprice);

            //数量的 增加   库存进行减少
            $.each($("#upGoods tr"), function (index, value) {
                var goodsNameUp = $(this).children().eq(0).text();
                var isTrue = goodsNameUp == goodsName;
                if (isTrue) {
                    //找到了就让库存增加
                    var kucunCount = $(this).children().eq(3).text();
                    var newKucun = Number.parseInt(kucunCount) - 1;
                    $(this).children().eq(3).text(newKucun);
                }

            });

            sum();

        }

        //总计
        var allMoney = 0;
        function sum() {
            allMoney = 0;
            var trDom = $("#goods tr")
            $.each(trDom, function (index, value) {
                var newMoney = Number.parseInt($(this).children().eq(3).text());
                allMoney = newMoney + allMoney;
            })

            console.log("这是总价" + allMoney)
            //存入到表格中
            $('#total').text(allMoney)
        }


        function del(dom) {
            var trDom = $(dom).parent().parent();
            var goodsName = trDom.children().eq(0).text()
            var count = Number.parseInt(trDom.children().eq(2).children().eq(1).val());

            console.log(count)

            //删除的话  把删除的数量归还到库存中
            $.each($("#upGoods tr"), function (index, value) {
                var goodsNameUp = $(this).children().eq(0).text();
                var isTrue = goodsNameUp == goodsName;
                if (isTrue) {
                    //找到了就让库存减少
                    var kucunCount = $(this).children().eq(3).text();
                    var newKucun = Number.parseInt(kucunCount) + count;
                    $(this).children().eq(3).text(newKucun);
                }
            });


            trDom.remove();
            sum();
        }
    </script>
</body>

</html>

Good luck。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
带你快速实现购物车功能
01-08
一、熟悉购物车 所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。 UI图 二、具体购物车功能 在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还有商品的管理和失效商品的处理。 三、具体代码 html代码 去逛逛 更多人都在看的 年货全坚果大礼包 【1598g/10袋】
jq实现购物车的思路和方法（看一遍以后都会懂）
06-17
主要实现参照淘宝购物车功能，有开发思路以及源码，帮助新手同学快速掌握购物车或者jq语法
jQuery学习详细使用篇day2
qq_38188228的博客
09-20 203
day02 - jQuery 目标： 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop()*** ​ 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 语法 ​ 注意：prop() 除了普通属性操作，更适合操作表单属性：disabl
前端——使用JQuery 实现点击加入购物车（二）
tingyu_的博客
07-20 4173
实现效果： 1.当鼠标放到购物车上时，购物车向左移动，并展示购物车中的商品 2.点击删除，可以在购物车中删除这个商品项 3.点击加，购物车中该商品数量增加1 4.点击减，购物车中该商品数量减少1，并且当减到1的时候，提示不能再减 一、鼠标的移入与移出： 在鼠标未移入的时候，页面效果是这样的： 在页面的右侧主要有两块： 1.购物车图标 2.鼠标移入购物车图标后，右侧部分左滑，显示购物车中的 商品，也就是下图这个样子： 在这里首先解释CSS部分，理解之后，JQuery部分就好理解了。..
jQuery——购物车的实现
beichen0518的博客
04-08 1298
Web前端回顾 HTML Tag/Element — Content 标签 承载内容 CSS — Display — Box Model 渲染页面 显示 样式表是有继承的 但margin,padding,border,backgroundImage,backgroungColor这些不会被子元素继承 javaScript — Behavior 负责行为 ECMAScript 标准 BOM ...
jQuery+Bootstrap布局购物车结算页面代码.zip
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
booystrap和jquery实现购物车
code280的博客
10-03 475
bootsrap，jquery
jQuery购物车完整功能实现，全代码详解（有动态效果图）
周百万的博客
07-25 8052
jQuery购物车 实现购物车完整功能全代码详解（有gif动态效果图）
jQuery实现购物车
qq_52108058的博客
05-04 7113
文章目录前言一、购物车属性全选1.案例演示2.实现代码3.实现方法二、使用步骤1.引入库2.读入数据总结 前言 自己对index.html进行清楚的理解，清楚div包括的范围，class类名的写法，从而可以更容易写出js内容。 一、购物车属性全选 1.案例演示 当用户点击全选按钮的时候，把所有的商品复选框选中。 2.实现代码 $('.checkall').change(function(){ $('.j-checkbox, .checkall').prop("checked",$(this).
案例：购物车 商品加减号
青衣的博客
09-02 538
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
jquery实现购物车基本功能
12-30
购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示： 1.html代码： <body> 购物车空空如也，快去选购吧 <input type=checkbox class=checkOnly style=...
使用jQuery实现购物车结算功能
10-19
主要为大家详细介绍了使用jQuery实现购物车结算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现购物车计算价格功能的方法
10-24
主要介绍了jQuery实现购物车计算价格功能的方法,实例分析了jQuery针对html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
用jQuery做一个简单的购物车
StartChong
11-02 3836
用jQuery做一个简单的购物车 前言： 之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。 (img)自行准备 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果...
jQuery实现购物车的操作
apple_51486631的博客
05-26 2872
jQuery实现购物车 #购物车操作步骤： 一、实现购物车的全选和全不选功能及背景的添加和删除 二、实现数量模块的增加和减少 三、实现输入值改变商品的小计 四、用求和函数实现求和相加总价和总数量 五、实现商品的删除 提示：以下是本篇文章正文内容，下面案例可供参考。用$(function(){ 一、二、三、四、五...})来实现 一、实现购物车商品的全选和全不选及背景的添加和删除 1、当点击全选按钮时实现商品的全选和全不选 操作步骤： 核心思想：当点击全选按钮checkall的时候，要用全选按钮的状态.
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 1456
JavaScript购物车。
Jquery 实现购物车
分享我的点点滴滴，在成长路上与你同行！
09-23 3179
购物车需求： 1、 当全选选中时，所有商品的小复选框的选中状态跟按下的全选按钮保持一致； 2、 当选中商品时，添加背景颜色；如果所有商品都被选中，就让全选按钮为选中状态； 3、 可以点击 +或 - 来增加或减少商品数量，也可以直接在文本框修改数量，数量修改之后的小计也会相应改变； 4、 可以进行删除单个商品、和选中商品以及清空购物车； 5、 进行操作时，下面的已选商品件数以及总额也会有相应变化； 默认： 全选和改变数量效果 删除选中的商品 删除之后的效果 JS...
jQuery实现简易购物车
Ann_Chenyx
08-10 6168
  上上篇用JS写了个简单的购物车，学习了jQuery之后想要看看JavaScript和jQuery的区别到底有多大，于是又在原来的模板上用JQuery将购物车再次实现了一下。 HTML部分代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/..
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1160
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
jq编写购物车
05-30
你可以使用 jq 编写一个简单的购物车程序来处理用户的购买请求。以下是一个可能的实现： ```bash # 商品列表，格式为 JSON 数组 products='[ {"name": "apple", "price": 2.5, "quantity": 10}, {"name": "banana...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值