使用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中关于bind()方法的使用技巧分享
Mar 30 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现轮播图源码
Oct 23 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
长波有什么东西
2021/03/01 无线电
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python对象的属性访问过程详解
2020/03/05 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
毕业生自我鉴定实例
2014/01/21 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
合作意向协议书
2015/01/29 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书