使用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 实现双击编辑表格功能
Jun 19 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
PHP简介
2006/10/09 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python读取注册表中值的方法
2013/04/08 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python更改已存在excel文件的方法
2018/05/03 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
保险经纪人求职信
2014/03/11 职场文书
同学会演讲稿
2019/04/02 职场文书