jquery添加商品(jquery实现购物车功能)
类别:编程学习 浏览量:1415
时间:2021-09-29 01:55:06 jquery添加商品
jquery实现购物车功能本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下
html
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align: center; } table { margin: 0 auto; width: 60%; border: 2px solid #aaa; border-collapse: collapse; } table th, table td { border: 2px solid #aaa; padding: 5px; } th { background-color: #eee; } </style> <script src="jquery-3.2.1.min.js"></script> <script src="gw.js"></script> </head> <body> <h1>真划算</h1> <table id="tb1"> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技M185鼠标</td> <td>80</td> <td>黑色</td> <td>893</td> <td>98%</td> <td align="center"><input type="button" value="加入购物车" onclick="addshoping(this);" /></td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"><input type="button" value="加入购物车" onclick="addshoping(this);" /></td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"><input type="button" value="加入购物车" onclick="addshoping(this);" /></td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td align="center"><input type="button" value="加入购物车" onclick="addshoping(this);" /></td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td align="center"><input type="button" value="加入购物车" onclick="addshoping(this);" /></td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody id="goods"> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td id="total"></td> <td></td> </tr> </tfoot> </table> </body> </html>
js
//添加购物车 function addshoping(btn) { var name = $(btn).parent().siblings().eq(0).html() var price = $(btn).parent().siblings().eq(1).html() var trs = $("#goods tr") var nameArr = new Array(); $.each(trs, function (index, value) { nameArr.push($(this).children('td').eq(0).text()) }) var $tr = $('<tr>' + '<td>' + name + '</td>' + '<td>' + price + '</td>' + '<td align="center">' + '<input type="button" value="-" onclick="jian(this);"/> ' + '<input type="number" size="3" readonly value="1"/> ' + '<input type="button" value="+" onclick="increase(this);"/>' + '</td>' + '<td>' + price + '</td>' + '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' + '</tr>'); var ishasName = nameArr.indexOf(name) if (ishasName >= 0) { var goodcount=trs.eq(ishasName).children('td').eq(2).children().eq(1).val() Number.parseInt(goodcount); trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount) var price=trs.eq(ishasName).children('td').eq(1).html() Number.parseInt(price) trs.eq(ishasName).children('td').eq(3).html(goodcount*price); } else { // $tr.insertAfter($("#goods tr:eq(0)")) $("#goods").append($tr); } var kucun = tds.eq(3).html() Number.parseInt(kucun) tds.eq(3).html(--kucun) sum() } //增加 function increase(btn){ var num=$(btn).prev().val() Number.parseInt(num); var bignew=$(btn).prev().val(++num) var price = $(btn).parent().prev().html(); $(btn).parent().next().html(num*price); sum(); }; //减少 function jian(btn){ var num=$(btn).next().val() if(num<=1){ return; } Number.parseInt(--num) var price = $(btn).parent().prev().html(); var newprice=$(btn).parent().next().html(); $(btn).parent().next().html(newprice-price); $(btn).next().val(num) sum() } //删除 function del(btn){ $(btn).parent().parent().remove() sum(); } //总和 function sum() { // 获取tbody下的所有行 var $trs = $("#goods tr"); // 遍历他们 var sum = 0; for (var i = 0; i < $trs.length; i++) { // 获取每一行 var $tr = $trs.eq(i); // 获取该行中第四列的值(金额) var mny = $tr.children().eq(3).html(); sum += parseFloat(mny); } // 写入到合计 $("#total").html(sum); };
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jquery实现在光标位置插入内容
- jquery脚本检测密码强度
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- 链式编程jquery(实例详解jQuery的链式编程风格)
- jquery中serialize方法对空格的处理
- 2014-8-31
- 介绍几个jQuery实用函数
- jquery 选择器的用法
- jQuery邮箱自动补全
- jquery使用data缓存数据
- jquery 增加表格(jquery实现表格无缝滚动)
- jquery遍历json字符串
- jQuery中$.each的用法
- jquery ajax详细教程(jquery+Ajax实现简单分页条效果)
- jquery中hasClass()、is()判断是否包含指定的class
- jqueryajax实现部分刷新(php+jQuery ajax实现的实时刷新显示数据功能示例)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
热门推荐
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- laravel常用的辅助函数介绍(Laravel框架表单验证操作实例分析)
- sqlservercount函数的用法(SQL Server中row_number函数的常见用法示例详解)
- web前端测试工具
- Docker 部署单机版 Pulsar 和集群架构 Redis(开发神器)的方法(Docker 部署单机版 Pulsar 和集群架构 Redis开发神器的方法)
- mysql 双主双备(MySQL配置了双主,是如何避免出现数据回环冲突的)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- css3中基本选择符(CSS3 clip-path 用法介绍详解)
- python 文件操作(Python File文件 方法整理)
- sql转字符串函数(sql中的常用的字符串处理函数大全)