书店购物车--增删改
2024-06-04 07:02:10
增：
删：
改：
实现代码：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>蔚蓝网购物车页面</title><link href="css/global.css" rel="stylesheet" /><link href="css/layout.css" rel="stylesheet" /><link href="css/template.css" rel="stylesheet" />
</head><body>
<header id="header"><div class="header_top"><div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</div><div class="header_top_right"><ul><li><a href="#" target="_self">客户服务</a></li><li>|</li><li id="menu"><a href="#" target="_self">新手入门</a> <img src="data:images/arrow_down.gif" alt="arrow" /><div id="dd_menu_top_down"><a href="#" target="_self">购物保障</a><br /><a href="#" target="_self">购物流程</a><br /><a href="#" target="_self">会员介绍</a><br /><a href="#" target="_self">常见问题</a><br /></div></li><li>|</li><li><a href="#" target="_self">礼品卡</a></li><li>|</li><li><a href="#" target="_self">我的订单</a></li><li>|</li><li><a href="#" target="_self">我的账户</a></li><li>|</li><li><a href="shopping.html" target="_parent">购物车</a></li><li><img src="data:images/header_shop.gif" alt="shopping"/></li></ul></div></div>
</header>
<div class="header_middle"><div class="logo"><img src="data:images/logo.png" alt="logo"/></div><div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav"><ul><li><a href="#"> 全部商品分类</a></li><li><a href="#"> 首页</a></li><li><a href="#"> 图书</a></li><li><a href="#"> 特价</a></li><li><a href="#"> 团购</a></li></ul>
</nav>
<!--中间部分开始-->
<div id="main"><div> <img src="data:images/shopping_myshopping.gif" alt="shopping"/> <a href="#">全场免运费活动中</a></div><!--为您推荐商品开始--><div class="shopping_commend"><div class="shopping_commend_left">根据您挑选的商品，蔚蓝为您推荐</div><div class="shopping_commend_right"><img src="data:images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow"/></div></div><div id="shopping_commend_sort"><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li><li class="shopping_commend_list_2">￥39.00</li><li class="shopping_commend_list_3">￥29.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（蔚蓝网独家首发）</a></li><li class="shopping_commend_list_2">￥28.00</li><li class="shopping_commend_list_3">￥19.40</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li><li class="shopping_commend_list_2">￥32.80</li><li class="shopping_commend_list_3">￥25.10</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li><li class="shopping_commend_list_2">￥36.00</li><li class="shopping_commend_list_3">￥27.70</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div><div class="shopping_commend_sort_mid"></div><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li><li class="shopping_commend_list_2">￥59.00</li><li class="shopping_commend_list_3">￥47.20</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li><li class="shopping_commend_list_2">￥34.80</li><li class="shopping_commend_list_3">￥20.60</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li><li class="shopping_commend_list_2">￥39.80</li><li class="shopping_commend_list_3">￥30.50</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li><li class="shopping_commend_list_2">￥25.00</li><li class="shopping_commend_list_3">￥17.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div></div><div class="shopping_list_top">您已选购以下商品</div><div class="shopping_list_border"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr class="shopping_list_title"><td class="shopping_list_title_1">商品名</td><td class="shopping_list_title_2">单品积分</td><td class="shopping_list_title_3">市场价</td><td class="shopping_list_title_4">蔚蓝价</td><td class="shopping_list_title_5">数量</td><td class="shopping_list_title_6">删除</td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct"><tr class="shopping_product_list" id="shoppingProduct_01"><td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td><td class="shopping_product_list_2"><label>189</label></td><td class="shopping_product_list_3">￥<label>32.00</label></td><td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_02"><td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td><td class="shopping_product_list_2"><label>173</label></td><td class="shopping_product_list_3">￥<label>28.00</label></td><td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_03"><td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td><td class="shopping_product_list_2"><label>154</label></td><td class="shopping_product_list_3">￥<label>24.80</label></td><td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td><td class="shopping_product_list_5"><input type="text" value="2"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_04"><td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td><td class="shopping_product_list_2"><label>358</label></td><td class="shopping_product_list_3">￥<label>458.00</label></td><td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_05"><td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td><td class="shopping_product_list_2"><label>712</label></td><td class="shopping_product_list_3">￥<label>95.00</label></td><td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_06"><td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td><td class="shopping_product_list_2"><label>10</label></td><td class="shopping_product_list_3">￥<label>198.00</label></td><td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr></table><div class="shopping_list_end"><div><a id="removeAllProduct" href="javascript:void(0);">清空购物车</a></div><ul><li class="shopping_list_end_1"><input name="" type="image" src="data:images/shopping_balance.gif"/></li><li class="shopping_list_end_2">￥<label id="product_total"></label></li><li class="shopping_list_end_3">商品金额总计：</li><li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow" id="product_save"></label><br/>可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label></li></ul></div></div>
</div><!--网站版权部分开始-->
<footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="data:images/validate.gif" alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</body></html>
js文件：
$(function () {//删除$(".blue").click(function () {$(this).parent().parent().remove();})//清空购物车$("#removeAllProduct").click(function () {$("#myTableProduct").children().remove()})//新增$('.shopping_yellow').click(function (){var node = $('#shoppingProduct_01').clone(true); //克隆let sum = $('myTableProduct>tr').length + 1;node.attr('id', 'shoppingProduct_0' + sum); //更改id名let dx = $(this).parent().parent(); //需求对象let name =dx.find('.shopping_commend_list_1').find('a').html(); //获取书名let yj = dx.find('.shopping_commend_list_2').html().replace("￥",""); //获取原价let zkj = dx.find('.shopping_commend_list_3').html().replace("￥",""); //获取折扣价node.find(".shopping_product_list_1").find('a').html(name); //修改书名node.find(".shopping_product_list_2").find('label').html(parseInt(zkj)); //修改积分node.find(".shopping_product_list_3").find('label').html(yj); //修改原价node.find(".shopping_product_list_4").find('label').html(zkj); //修改折扣价node.find(".shopping_product_list_4").html().replace("(59折)",'('+parseInt(zkj/yj*100)+'折)'); //修改折扣名$('#myTableProduct').append(node); //插入克隆对象total(); //刷新总金额})//计算总结function total() {var jifen= 0,yuan= 0,prices=0;//积分，原价，现价$("#myTableProduct").find('tr').each(function (i,les) {var num=$(les).find('.shopping_product_list_5').find('input').val(); //数量jifen+=parseInt($(les).find(".shopping_product_list_2").text())*num; //积分var price=parseInt($(les).find(".shopping_product_list_4").find('label').text().replace(".",""))*num; //蔚蓝价prices+=price; //所有现价var yuang=parseInt($(les).find(".shopping_product_list_3").find("label").text().replace(".",""))*num;yuan+=yuang;})$("#product_integral").text(jifen);$("#product_total").text(prices/100);$("#product_save").text((yuan-prices)/100)return prices/100;}total()//修改数量$("#myTableProduct").find(".shopping_product_list_5").children("input").change(function(){var value=$(this).val();if((value == "")||!(/^[0-9]*[1-9][0-9]*$/.test(value))){alert("数量不能为空，且只能为正整数");$(this).val(1);}var t = total();alert("修改成功！，您的商品总金额是"+t+"元");});//商品页面影藏与显示$("#shopping_commend_arrow").click(function () {if($("#shopping_commend_sort").css("display")=="none"){$(this).attr("src","images/shopping_arrow_up.gif")}else {$(this).attr("src","images/shopping_arrow_down.gif")}$("#shopping_commend_sort").toggle();})
})书店购物车--增删改相关推荐
- vue后台增删改查_Vue 原生实现商城购物车增删改查
业务分析: 1 .整个页面分为两种状态: 正常状态:选中商品显示总价,可结算 编辑状态:选中商品增删改查,可删除 页面状态直接影响底部栏的变化 2. 商品,店铺,全选两种状态都可三级联动 3. 编辑状 ...
- 关闭浏览器 退出redis id_购物车增删改与清空，用Redis实现一下吧
购物车管理包含功能:提交商品到购物车.显示购物车列表.删除购物车里商品.修改购物车.清空购物车等等 1. 购物车的实现方式: ① 可以把购物车的数据,给存储到 session 里面,一旦关闭浏览器,则 ...
- 移动商城第七篇【购物车增删改查、提交订单】
把商品加入购物车 接下来我们要做的就是将商品加入到购物车中.我们这次使用的是Cookie来将用户的信息存储起来.那为什么要用cookie呢?? 那我们现在决定将购物车存储在Cookie中了,那Cook ...
- Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...
- 商品管理系统商品分页，增删改查的实现增加购物车的功能Cart
添加购物车前提条件:你的商品的页面有已经设计成功,有全选,全不选,反选这些操作的实现 通过checkbox复选框的id进行添加商品,从而获取商品的名字和其他的信息 增加成功后通过Ajax请求进行相关的 ...
- Spring Date JPA实现增删改查
1.新建一个Cart类 package com.entity;public class Cart {private int id;private int userId;private int medi ...
- 西门子低代码平台通过Database Connector 连接Mysql 实现增删改查
简介: 本文介绍了西门子低代码平台如何通过Database Connector 连接到外部数据库并实现增删改查操作.连接外围数据库是西门子低代码平台的内置功能,不同数据库的连接方式大同小异,本文以My ...
- java从入门到精通二十四（三层架构完成增删改查）
java从入门到精通二十四(三层架构完成增删改查) 前言 环境准备 创建web项目结构 导入依赖和配置文件 创建层次模型 实现查询 实现添加 实现修改 完成删除 做一个用户登录验证 会话技术 cook ...
- 欢迎来到Jsp编程课时十二——今天实现的目标是。@1将数据库的数据发送到浏览器。@2利用浏览器实现对数据库的增删改查操作。@3理解MVC三层架构的定义。
完成项目会有以下的效果. JSP第二十课:Mvc+Mysql+Servlect+Jsp实现在浏览器上对数据库的增删改查. MVC全名是Model View Controller, 是 @@1模型(mo ...
- 电信报表java_china_netcom 用java和框架Strus开发的电信报表系统，信息 的增删改查 Develop 238万源代码下载- www.pudn.com...
文件名称: china_netcom下载 收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 532 KB 上传时间: 2014-09-04 下载次数: 1 提 供 者: ...
最新文章
- 如何提高邮件投递能力-提高邮件群发能力的方法
- UVa 120 - Stacks of Flapjacks
- 如何在Git中合并特定的提交
- spss方差分析_SPSS双因素重复测量方差分析
- 《Windows程序设计》学习笔记（chap10菜单及其它资源）（一）
- 博士申请 | 西湖大学智能无人系统实验室招收空中机器人方向全奖博士生
- 前端学习之路---node.js（二）
- 指派问题——匈牙利法
- 谷粒商城三阶段课件_高二地理必修三11：（课件）第2章 区域生态环境建设第2节 森林的开发和保护——以亚马孙热带雨林为例...
- 介绍几本学习Tkinter的书籍
- 人际沟通与社交媒体（媒介沟通的优缺点）
- 搭建在线网校要注意的一些事项
- java mysql方言_支持的数据库方言 · drinkjava2/jDialects Wiki · GitHub
- css中的图标字体的实现方案及原理和工具使用
- 骨传导耳机是什么意思，骨传导耳机的好处具体有哪些
- 作为一名仓库管理人员，如何有效地管理仓库？
- python中arg是什么意思_Python中的*arg和**kwarg
- 从Java的前景与就业情况看，Java是你首选的编程语言，没有之一
- PIC里printf的使用
- dwf怎么合成一个_杨树PtoDWF4在次生壁合成过程中的功能分析
热门文章
- 蓝桥杯 C语言 试题 算法训练 审美课
- 生产和服务使用的计算机软件,Windows效率 篇三：Windows 10软件推荐，将你的生产力工具发挥到极致！...
- 计算机丢失d3d10,“怎样解决d3dx10_42.dll丢失造成的游戏打不开”的解决方案
- python练习题--斐波那契数列
- 【学习笔记】尚硅谷大数据项目之Flink实时数仓---数据采集
- Clover 驱动文件夹_四叶草Clover相关
- 计算机开机后亮度分布不均,[教程交流]解决最低亮度黑屏和亮度不均
- 这位辩手，你想试试线上语音 battle 么？
- dbf转成excel_dbf转换成excel下载|dbf转换成excel v1.0-520下载站
- 有什么软件方便画er图_数据库ER图绘制工具(DbSchema)