需求
使用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. HTML：<input type="text">文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

  2. nGrinder TestRunnerInsertMysqlMore.groovy

    s C:\Users\Lindows\workspace\GroovyTest\src\com\iteye\lindows\mysql\TestRunnerInsertMysqlMore.groovy ...

  3. 5、Python-字典

    定义 info = {'name': '班长', 'id': 88, 'sex': 'man', 'address': '地球亚洲中国北京'} print(info['name']) print(in ...

  4. Dubbo是什么

    读音 |ˈdʌbəʊ| !不是[dubəʊ]!  (重点:调用步骤) Dubbo是什么 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.其核心 ...

  5. Gym - 100085G - GCD Guessing Game

    原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...

  6. xshell访问Ubuntu16.04显示乱码(即使在xshell设置了utf8)解决方案

    一开始问题是:(无法显示,也无法输入) 然后使用: locale -a 查看服务器安装的全部编码: (且服务器使用的 LANG=C) 只要用: 即可显示中文.也可以输入中文.

  7. 第二节：从程序集的角度分析MemoryCache，并完成基本封装

    一. 轻车熟路 有了上一个章节对 System.Web.Caching.Cache 的探究,这里我们按照同样的思路对 MemoryCache 进行探究,相信必定会得心应手. 1. 程序集准备 a. 需 ...

  8. Jsp (Java Server Pages)相关知识九大内置对象和四大作用域

    一．初识JSP Jsp页面的组成:静态内容.指令.表达式.小脚本.声明.标准动作.注释等元素构成 Url:统一资源定位符 Url组成:协议.主机名(包括端口号).路径 1．注释的方式: 1.HTML注 ...

  9. 五、u-boot 启动流程---u-boot.lds

    5.1 u-boot.lds  链接脚本分析 uboot 编译出来的第一个链接脚本就是执行 u-boot.lds 链接脚本,去掉里面无用的和没有定义的,进行分析. /* 配置头文件,自动生成的,包含芯 ...

  10. Java——集合

    Java的集合类是一种非常有用的工具类,用于存储多个对象.它是一个容器,可以把多个对象放到里面. Java集合分三种情况: Set:无序.不可重复 List:有序.可重复 Map:具有映射关系 Col ...