需求
使用JS实现购物车功能02

具体代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>购物车02</title>

</head>

<body>

<table align="center" border="2" id = "shop">

<tr>

<th colspan="4" align="center">商品列表<input id="add" type="button" value="一键上架"></th>

</tr>

<tr>

<th>商品序号</th>

<th>商品名称</th>

<th>出售价格</th>

<th>操作</th>

</tr>

</table>

<br>

<br>

<br>

<br>

<br>

<table align="center" border="2" id = "cart">

<tr>

<th colspan="4" align="center">购物车<input id="clear" type="button" value="一键清空"></th>

</tr>

<tr>

<th>商品名称</th>

<th>商品价格</th>

<th>商品数量</th>

<th>操作</th>

</tr>

</table>

<h3 id="total" align="center">总价: ￥0.0</h3>

<script type="text/javascript">

var goods_name = ["阿尔卑斯棒棒糖","耳机","北京糖葫芦","智能扫地机器人"];

var goods_price = ["1.5","30","5","258"];

//一键上架

var add = document.getElementById("add");

add.onclick = function(){

var shop =  document.getElementById("shop");

for(var i = 0; i< goods_name.length;i++){

var row = shop.insertRow();

row.insertCell().innerHTML = i + 1;

row.insertCell().innerHTML = goods_name[i];

row.insertCell().innerHTML = "￥" + goods_price[i];

row.insertCell().innerHTML = "<button id='" + i + "' onclick='addCart(this);'>加入购物车</button>";

}

this.setAttribute("disabled", true);

}

var cartData = {

}

var index = 0;

//准备加入购物车的数据

function addCart(btn) {

var gname = goods_name[btn.id];

var gobj = cartData[gname];

if(!gobj){//没有数据

//新增一条数据

cartData[goods_name[btn.id]] = {

id:btn.id,

count:1,

index:index++

}

}else{

cartData[goods_name[btn.id]].count++;

}

//console.log(cartData);

showCart(cartData);

}

//加入购物车

function showCart(obj){

clearCart();

getTotal(obj);

var cart = document.getElementById("cart");

for(var k in obj){

var row = cart.insertRow();

row.insertCell().innerHTML = k;

row.insertCell().innerHTML = "￥" + goods_price[obj[k].id];

row.insertCell().innerHTML = obj[k].count;

row.insertCell().innerHTML = "<button id='" + k + "' onclick='deleteRow(this);'>删除</button>";

}

}

//清空购物车

var clear = document.getElementById("clear");

clear.onclick = function(){

clearCart();

cartData = {};

}

//清空购物车的方法

function clearCart(){

var cart = document.getElementById("cart");

var rows = cart.rows;

for(var i = rows.length - 1 ; i > 1 ; i--){

cart.deleteRow(i);

}

total = 0.0;

//更新总价

document.getElementById("total").innerHTML = "总价:￥" + total;

}

var total = 0.0;

//得到总价

function getTotal(obj){

for(var k in obj){

var subTotal = goods_price[obj[k].id] * obj[k].count;

total += subTotal;

}

//更新总价

document.getElementById("total").innerHTML = "总价:￥" + total;

}

//删除整行

function deleteRow(btn){

var cart = document.getElementById("cart");

var rowIndex = btn.parentNode.parentNode.rowIndex;

cart.deleteRow(rowIndex);

delete cartData[btn.id];

total = 0.0;

getTotal(cartData);

} 

</script>

</body>

</html>

效果图
样式比较丑，不要介意哈

JS实现购物车02的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. JS膏集02

    JS膏集02 1.复习 函数也是对象 2.贪食蛇案例 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. JS自学笔记02

    JS自学笔记02 1.复习 js是一门解释性语言,遇到一行代码就执行一行代码 2.查阅mdn web文档 3.提示用户输入并接收,相比之下,alert只有提示的作用: prompt(字符串) 接收: ...

  4. JS实现购物车01

    需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  6. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  7. js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

    js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  8. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  9. vue.js插件使用(02) vue-router

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

随机推荐

  1. 约会 音频mm教你追女孩

    微信吧地址发给他人. 美团提前选好环境然后提前打电话订购一个位置. 微博作用是为:更多的谈资.热搜 ,最近上榜的话题说. 打车软件: 地图: 2.外表: 下澡,指甲,胡子,发型,适合服装.发型和服装搭 ...

  2. Struts2的安装

    安装Struts 2 ,并开发一个简单 Model 1.下载Struts 2 在Struts 2 官网下载:http://struts.apache.org ,下载 struts-2.3.16.3-a ...

  3. 中南大学2018年ACM暑期集训前期训练题集(入门题) Q: Simple Line Editor

    数据有毒,一个一个读字符是错,整个字符串读入,一次就A了. 总之,数据总是没有错的,还是对c++了解地不够深刻,还有,在比赛中,一定要有勇气重构代码 错误代码: #include<iostrea ...

  4. DTLS协议中client/server的认证过程和密钥协商过程

    我的总结:DTLS的握手就是协商出一个对称加密的秘钥(每个客户端的秘钥都会不一样),之后的通信就要这个秘钥进行加密通信.协商的过程要么使用非对称加密算法进行签名校验身份,要么通过客户端和服务器各自存对 ...

  5. 事件对象——event

    一.介绍 把一个click时间log出来是这样的: { altKey:false, bubbles:true, button:0, buttons:0, cancelBubble:false, can ...

  6. 即将上线的Spark服务器面临的一系列填坑笔记

    即将上线的Spark服务器面临的一系列填坑笔记 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 把kafka和flume倒腾玩了,以为可以轻松一段时间了,没想到使用CDH部署的spa ...

  7. .Net进阶系列(13)-异步多线程(Task和Parallel)（被替换）

    一. Task开启多线程的三种形式 1. 利用TaskFactory下的StartNew方法,向StartNew传递无参数的委托,或者是Action<object>委托. 2. 利用Tas ...

  8. JavaScript常用函数总结

    1.test()方法 var str = "wzltestreg"; var reg = new RegExp("wzl", ""); al ...

  9. Winform中使用WPF控件并动态读取Xaml

    1.添加新项 2.在构造函数中加入 public partial class UserControl1 : UserControl { public UserControl1() { Initiali ...

  10. Java之Jacob调用COM接口DLL-----------------------------------dm。dll

    用Java控制windows了,嗯,低层次按键模拟,可控制游戏,内存也不在话下. 一.环境介绍 1.myeclipse8.5 2.著名按键插件dm.dll  32bit.此插件实现COM接口,百度百科 ...