<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>lili</title>

     <script src="js/jQuery-1.8.2.min.js"  type="text/javascript"></script>

</head>

<body>

<table>

    <tr>

        <td><input type="checkbox" id="allCheck">全选</td>

        <td>商品名称</td>

        <td>单价</td>

        <td>数量</td>

        <td>小计</td>

        <td>操作</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="singleCheck"></td>

        <td>女装</td>

        <td>100</td>

        <td class="smallnum"><span class="plus2">-</span><input type="text" value="1" size="1" class="num"><span class="plus">+</span></td>

        <td class="smallMoney">100</td>

        <td><a href="javascript:;"  class="del">删除</a></td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="singleCheck"></td>

        <td>男装</td>

        <td>50</td>

        <td class="smallnum"><span class="plus2">-</span><input type="text" value="1"  size="1" class="num"><span class="plus">+</span></td>

        <td class="smallMoney">50</td>

        <td><a href="javascript:;" class="del">删除</a></td>

    </tr>

</table>

<div>共<span class="totalNum">0</span>件商品，共<span class="totalPrice">0</span>元</div>

</body>

</html>

<!-- 输入 全选，单选，+，-，删除 -->

<!-- 输出 小计，总件数，总数量 -->

<!-- 函数 smallMoney() ,total(),allCheck() -->

<script>

//小计函数

function smallMoney(arg,p){

    // 输入jq对象和+-

    var num = arg.val()

    if(p=='+'){

        num ++;

    };

    if(p=='-'){

        num --;

    };

    arg.val(num);

    // 获取单价

    var smallP = arg.parent().prev().text();

    // 小计

    arg.parent().next().text(smallP*num)

};

//总件数，总数量函数

function total(){

    // 输入

    var totalNum = 0;

    var totalPrice = 0;

    // 遍历singleCheck

    $('.singleCheck').each(function(){

            if($(this).is(':checked')){

                num_Num += Number($(this).parent().parent().find('.smallnum .num').val());

                num_Price += Number($(this).parent().parent().find('.smallMoney').text())

            }

    });

    // 修改总件数和总数量

    $('.totalNum').text(num_Num);

    $('.totalPrice').text(num_Price)

};

//全选函数

function allCheck(){

    if($(t).is(':checked')){

                $('.singleCheck').prop("checked", true)

        }else{

                $('.singleCheck').prop("checked", false)

        };

};

// 点击全选

$('#allCheck').click(function(){

    allCheck();

    total();

});

// 点击单选

$('.singleCheck').click(function(){

       total();

});

// 点击+

$('.plus').click(function(){

    singlePrice($(this).prev(),'+');

    total()

});

// 点击-

$('.plus2').click(function(){

    singlePrice($(this).next(),'-');

    total()

});

// 点击删除

$('.del').click(function(){

    $(this).parent().parent().remove();

    total()

})

</script>

python-Web-django-商城-购物车商品加减的更多相关文章

  1. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  2. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  3. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  4. python web -- django

    一. 安装 django $ pip install django (env)$ python >> import django >> django.VERSION >& ...

  5. python web——Django架构

    环境:windows/linux/OS 需要的软件:Firefox 浏览器(别的也可以 不过firfox和python的webdriver兼容性好) git版本控制系统(使用前要配置 用户 编辑器可以 ...

  6. 微信小程序——购物车数字加减

    上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setDat ...

  7. python datetime库使用和时间加减计算

    datetime库使用 一.操作当前时间 1.获取当前时间 >>> import datetime >>> print datetime.datetime.now( ...

  8. python web django base skill

    web框架本质 socket + 业务逻辑 框架实现socket tonado node.js 使用WSGI实现socket django flask 自己实现框架思路 wsgiref socket ...

  9. Vue: 购物车数量加减按钮

    效果图: HTML: <div class="label"> <p class="buy_num">购买数量</p> < ...

随机推荐

  1. GDI根据位图和透明度创建蒙版

    #include <windows.h> LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM l ...

  2. springmvc处理一个请求的全流程

    首先,用户的浏览器发出了一个请求,这个请求经过互联网到达了我们的服务器. Servlet 容器首先接待了这个请求,并将该请求委托给 DispatcherServlet 进行处理. 接着 Dispatc ...

  3. Go学习笔记(六) | 使用swaggo自动生成Restful API文档(转)

    关于Swaggo 或许你使用过Swagger, 而 swaggo就是代替了你手动编写yaml的部分.只要通过一个命令就可以将注释转换成文档,这让我们可以更加专注于代码. 目前swaggo主要实现了sw ...

  4. ansible-playbook 显示命令返回结果

    --- - hosts: test gather_facts: F #开启debug vars: war: "ps -ef | grep tomcat | grep -v grep | aw ...

  5. 自动上传本地图片和word图片(word图片需使用从word粘贴功能)

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  6. Codevs 1404 字符串匹配(Kmp)

    1404 字符串匹配 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的 ...

  7. 在django中解决跨域AJAX

    由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接收罢了. 浏览器同源 ...

  8. 查看window用户登录日志

    查看window用户登录日志 能追踪Windows系统登录时间的三种方法 Windows登录日志详解 事件ID=4798应该对应的是锁定操作(Win+L)

  9. Leetcode题目53.最大子序和（动态规划-简单）

    题目描述: 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释: 连 ...

  10. Netfilter 之 连接跟踪钩子函数分析

    ipv4_conntrack_defrag ipv4_conntrack_defrag对输入包进行检查,如果是分片包,则调用nf_ct_ipv4_gather_frags函数进行重组: static ...