使用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简介_动力节点Java学院整理
Jul 04 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现tab栏切换效果
Dec 22 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
实例解析php的数据类型
2018/10/24 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
三国演义读书笔记
2015/06/25 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
python数字图像处理:图像的绘制
2022/06/28 Python