需求
使用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. 把pandas dataframe转为list方法

    把pandas dataframe转为list方法 先用numpy的 array() 转为ndarray类型,再用tolist()函数转为list

  2. python中迭代器和生成器的区别

    #!/usr/bin/python def power(values): for value in values: print "powing %s" % value yield ...

  3. on条件与where条件的区别

    数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: 1. on条件是在生成临时表时使用的条 ...

  4. SQL连接服务器链接失败

    链接服务器"AGPSServer"的 OLE DB 访问接口 "SQLNCLI10" 返回了消息 "登录超时已过期".链接服务器" ...

  5. docker入门（三）

    docker容器IP"暴露"到外网(宿主机外) 首先将docker容器IP固定 Docker自身的4种网络工作方式,简略说明下: host模式,使用--net=host指定. co ...

  6. python 面试题--你能做出多少？

    python3中__get__,getattr,__getattribute__的区别 什么是 GIL 详细博客 GIL = Global Intercept Lock 全局解释器锁,任意时刻在解释器 ...

  7. C# 对图片加水印

    using System; using System.Collections; using System.Data; using System.Linq; using System.Web; usin ...

  8. Centos7编译hadoop异常:Received fatal alert: handshake_failure

    保持网络畅通 或者 配置代理 能够访问cdh的仓库 https://repository.cloudera.com/artifactory/cloudera-repos/ 编译hadoop版本 had ...

  9. joomla安装

    最开始我以为是我电脑反映慢.傻傻的等了很久.因为我在sae上面初始化成功了.只是差两张表而已.等了很久很久.也试了好几次.反正就是卡在创建数据表那里.突然我想到在sae初始化数据库的时候有两种模式In ...

  10. python - getattr 与 getattribute 机制

    #__getattribute__ class Foo(): def __init__(self,name): self.name = name def __getattr__(self, item) ...