使用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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现颜色打字机的完整代码
Mar 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与MySQL开发的8个技巧小结
2010/12/17 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php时间计算相关问题小结
2016/05/09 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
node.js中的console用法总结
2014/12/15 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
python和shell获取文本内容的方法
2018/06/05 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python实现接口并发测试脚本
2019/06/25 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
本科毕业生专业自荐书范文
2014/02/05 职场文书
小学开学标语
2014/07/01 职场文书
投标承诺函格式
2015/01/21 职场文书
长江三峡导游词
2015/01/31 职场文书
怎样写观后感
2015/06/19 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
golang的文件创建及读写操作
2022/04/14 Golang
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS