python-Web-django-商城-购物车商品加减
<!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-商城-购物车商品加减的更多相关文章
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- js jquery 权限单选 bug修改以及正确代码 购物车数量加减
效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- python web -- django
一. 安装 django $ pip install django (env)$ python >> import django >> django.VERSION >& ...
- python web——Django架构
环境:windows/linux/OS 需要的软件:Firefox 浏览器(别的也可以 不过firfox和python的webdriver兼容性好) git版本控制系统(使用前要配置 用户 编辑器可以 ...
- 微信小程序——购物车数字加减
上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setDat ...
- python datetime库使用和时间加减计算
datetime库使用 一.操作当前时间 1.获取当前时间 >>> import datetime >>> print datetime.datetime.now( ...
- python web django base skill
web框架本质 socket + 业务逻辑 框架实现socket tonado node.js 使用WSGI实现socket django flask 自己实现框架思路 wsgiref socket ...
- Vue: 购物车数量加减按钮
效果图: HTML: <div class="label"> <p class="buy_num">购买数量</p> < ...
随机推荐
- Prim算法和Kruskal算法介绍
一.Prim算法 普利姆(Prim)算法适用于求解无向图中的最小生成树(Minimum Cost Spanning Tree).下面是Prim算法构造最小生成树的过程图解. ...
- 粗暴，干就完了----徐晓冬似的C语言自学笔记-----实现一个链表结构
#include <stdio.h> #include <stdlib.h> #define N 5 /*N 假定数组长度为5*/ typedef struct snode { ...
- struts2编写表单提交简单的（2）
实体 package com.oak.entity; public class User {private int id;private String username;private String ...
- ACM-ICPC 2017 沈阳赛区现场赛 G. Infinite Fraction Path && HDU 6223（BFS）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6223 参考题解:https://blog.csdn.net/qq_40482495/article/d ...
- Django-自定义web框架
自定义web框架 1.准备登录的html <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- elasticsearch利用head插件
restful接口使用方法 RESTful接口URL的格式: http://localhost:9200///[] 其中index.type是必须提供的. id是可选的,不提供es会自动生成. ind ...
- redis的主从复制原理
1. 前言 和MySQL主从复制的原因一样,Redis虽然读取写入的速度都特别快,但是也会产生读压力特别大的情况.为了分担读压力,Redis支持主从复制,Redis主从复制可以根据是否是全量分为全量同 ...
- DOM操作的性能优化
DOM操作的真正问题在于 每次操作都会出发布局的改变.DOM树的修改和渲染. React解决了大面积的DOM操作的性能问题,实现了一个虚拟DOM,即virtual DOM,这个我们一条条讲. 所以关于 ...
- 【软件工程】Alpha冲刺（4/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...
- Python中调用shell
1 简单调用shell命令 os.system(command) 在一个子shell中运行command命令, 并返回command命令执行完毕后的退出状态. 这实际上是使用C标准库函数system( ...