使用jQuery实现购物车


Posted in jQuery onOctober 29, 2020

本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下

HTML代码

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

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

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

最终效果

使用jQuery实现购物车

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
jquery实现抽奖功能
Oct 22 #jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
在php中取得image按钮传递的name值
2006/10/09 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
brook javascript框架介绍
2011/10/10 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
旅游管理毕业生自荐信
2013/11/05 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
党员公开承诺事项
2014/03/25 职场文书
2014年党支部承诺书
2014/05/30 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python