jQuery购物车

点击加入购物车库存减少，点加数量库存减少，点减数量库存增加，点击删除时把总数量归还到库存中

购物车HTML

<!DOCTYPE html>

<html>

  <head>

    <title>购物车</title>

    <meta charset="utf-8" />

    <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>

    <script src="js/jquery-3.6.0.js"></script>

    <script src="gwc-ds.js" ></script>


  </head>

  <body>

    <h1>清 仓 大 甩 卖！</h1>

    <table>

      <tbody id="upGoods">

      <tr>

        <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>

          <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>    

  </body>

</html>



JS的外部引入

$(function(){

    console.log("js的外部引入")

})

var downTrDom='';

// 1.给 加入购物车 添加一个 点击事件

function add_shoppingcart(dom){

    var trDom= $(dom).parent().parent();

    // 拿第一个 td

   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表格的 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();

}

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,657评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,889评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,057评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,509评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,562评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,443评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,251评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,129评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,561评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,621评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,220评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2赞 354

推荐阅读更多精彩内容

  • 大厂都在看的购物车
    jquery jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都...
    前端菜鸡儿126阅读 344评论 0赞 0
  • jQuery实现购物车小案例
    做的一个关于购物车的小案例，用表格实现，欢迎指正！ 功能包括以下几点： 1、商品全选、全不选 2、选择删除商品 3...
    执剑饮烈酒阅读 612评论 0赞 1
  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,710评论 1赞 7
  • 购物车jq
    购物车全选加减 总计等 $(function() { // 全选 var arr=[]; $(".ca...
    xwfccyqc阅读 508评论 0赞 0
  • 十分钟玩转 jQuery
    一、简介 定义 jQuery创始人是美国John Resig，是优秀的Javascript框架； jQuery是一...
    HarryBotter阅读 238评论 0赞 0