全国咨询热线:18720358503

天津百度微信小程序_使用jQuery完成购物车

类别:行业新闻 发布时间:2021-01-05 浏览人次:

使用jQuery实现购物车       这篇文章主要为大家详细介绍了使用jQuery实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下

HTML代码

 body 
 div id="goodsStore" 
 table 
 caption 储 物 仓 /caption 
 thead 
 td 商品编号 /td 
 td 商品名称 /td 
 td 商品单价 /td 
 td 商品颜色 /td 
 td 商品库存 /td 
 td 操作 /td 
 /tr 
 /thead 
 tbody 
 td  /td 
 td 鼠标 /td 
 td 78 /td 
 td 黑色 /td 
 td 500 /td 
 input type="button" value="加入购物车" / 
 /td 
 /tr 
 td  /td 
 td 键盘 /td 
 td 45 /td 
 td 白色 /td 
 td 300 /td 
 input type="button" value="加入购物车" / 
 /td 
 /tr 
 td  /td 
 td 显示器 /td 
 td 880 /td 
 td 黑色 /td 
 td 200 /td 
 input type="button" value="加入购物车" / 
 /td 
 /tr 
 td  /td 
 td 主机 /td 
 td 2332 /td 
 td 蓝色 /td 
 td 350 /td 
 input type="button" value="加入购物车" / 
 /td 
 /tr 
 /tbody 
 /table 
 /div 
 div id="goodsPay" 
 table 
 caption 购 物 车 /caption 
 thead 
 td 商品编号 /td 
 td 商品名称 /td 
 td 商品单价 /td 
 td 商品颜色 /td 
 td 购买数量 /td 
 td 单项小计 /td 
 td 操作 /td 
 /tr 
 /thead 
 tbody id="gwc" 
 /tbody 
 tfoot 
 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-colla凡科抠图e: colla凡科抠图e;
 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 
 //给行节点赋值
 (
 ' 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="-" / ' +
 ' input type="text" value="1" readonly / ' +
 ' input type="button" value="+" / ' +
 ' /td ' +
 ' td ' +
 tds[2].innerHTML +
 ' /td ' +
 ' td ' +
 ' input type="button" value="X" / ' +
 ' /td '
 //追加新节点
 $("#gwc").append(newTr);
 //更新总计
 ());
 (s + parseFloat(tds[2].innerHTML));
 function add(btn) {
 //获取按钮的上一个兄弟
 var txt = $(btn).prev();
 txt.val(parseFloat(txt.val()) + 1);
 //获取该商品的单价
 var price = $(btn).parent().prev().prev();
 //更新总计
 ());
 ()));
 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();
 //更新总计
 ());
 ()));
 function deleteGoods(btn) {
 //获取当前行
 var tr = $(btn).parent().parent();
 //删除当前行
 tr.remove();
 //获取该商品的单价
 var price = $(btn).parent().siblings().eq(2);
 //更新总计
 ());
 ()));
 /script 

最终效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

天津百度微信小程序_使用jQuery完成购物车

应用jQuery完成买东西车 本文关键为大伙儿详尽详细介绍了应用jQuery完成买东西车,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参...

2021-01-05
提高用户体验度的方法有哪些

网络运营的受众群体是顾客,针对SEO提升也是那样。老顾客的保持和新顾客户的提升取决于大家出示优良的客户感受度,这也是网站转换率的重要。那麼应当从什么层面搞好客户感受...

2021-01-05
企业网站建设企业-企业网络营销策划,百度网络推

知名品牌营销推广方案策划知名品牌营销推广、知名品牌方案策划 两者之间用广告宣传处于被动消息推送,比不上用互连网逻辑思维和媒体公关对策让顾客积极寻找你、挑选你! 线上...

2021-01-05
广州凡科互联网科技股份有限公司招聘运营专员

招聘人数:29职位信息【岗位描述】1、针对APP运营目标,分解执行落地;2、不断优化直播流程,执行,并参与到直播等相关工作中;3、对接跨团队、跨部门的沟通工作,具有资源整合能...

2021-01-05
广州凡科互联网科技股份有限公司招聘品质主管

招聘人数:10职位信息工作职责:1、负责部门的运营KPI指标的监控预警工作,制作时效监控报表,核实、分析主要原因、问题点,进行改善;2、协调改善上下游操作等异常问题,对问题...

2021-01-05
广州凡科互联网科技股份有限公司招聘淘宝运营

招聘人数:21职位信息1.负责淘宝平台日常运营的维护和管理;2.对淘宝店铺进行日常数据分析、竞品分析、产品更新、页面优化,以增强店铺的吸引力,提高产品的销量,完成店铺销售...

2021-01-05
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信