需求

使用JS实现购物车功能01

具体代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>购物车01</title>

<style type="text/css">

.num{

width:20px;

}

</style>

</head>

<body>

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

<tr>

<td colspan="5" align="center"><input id="add" type="button" value="添加"></td>

</tr>

<tr>

<td>商品名称</td>

<td>单价</td>

<td>数量</td>

<td>小计</td>

<td>操作</td>

</tr>

</table>

<script type="text/javascript">

document.getElementById("add").onclick = function(){

var goods_name = prompt("请输入商品名称");

if(goods_name==null){

alert("放弃添加");

return;

}

var goods_price = prompt("请输入商品单价");

if(goods_price==null){

alert("放弃添加");

return;

}

if(isNaN(goods_price)){

alert("单价格式不正确");

return;

}

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

var row = table.insertRow();

var col1=row.insertCell();

col1.innerHTML = goods_name;

var col2=row.insertCell();

col2.innerHTML = "￥" + goods_price;

var col3=row.insertCell();

col3.innerHTML = '<input type="button" value="-" onclick = "changNum(this);"><input type="text" class="num" value="1"><input type="button" value="+" onclick = "changNum(this);">';

var col4=row.insertCell();

col4.innerHTML = "￥" + goods_price;

var col5=row.insertCell();

col5.innerHTML = "<button onclick='removeRow(this);'>删除</button>";

}

function removeRow(btn){

var row = btn.parentNode.parentNode;

var index = row.rowIndex;

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

table.deleteRow(index);

}

function changNum(btn){

if(btn.value == "-"){

var count = btn.nextSibling;

//是否数量为1

if(count.value == 1){

alert("数量不能继续减少了");

return;

}

count.value = parseInt(count.value) - 1;

//找到单价

var price = btn.parentNode.previousSibling.innerHTML.substring(1);//字符串截取

//改变小计

var SubTotal = count.value * price;

//填入小计

btn.parentNode.nextSibling.innerHTML = "￥" + SubTotal;

}else if(btn.value == "+"){

//控制文本框中的数量

btn.previousSibling.value = parseInt(btn.previousSibling.value) + 1;

//找到单价

var price = btn.parentNode.previousSibling.innerHTML.substring(1);//字符串截取

//改变小计

var SubTotal = btn.previousSibling.value * price;

//填入小计

btn.parentNode.nextSibling.innerHTML = "￥" + SubTotal;

}

}

</script>

</body>

</html>

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

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

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

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

  2. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  3. JS膏集01

    JS膏集01 1.动态页面: 向服务器发送请求,服务器那边没有页面,动态生成后,返回给客户端 由html/css/js组成. js还不是面向对象的语言,是基于对象的语言.js中没有类的概念,js的继承 ...

  4. JS自学笔记01

    JS自学笔记01 1.开发工具 webstorm 2.js(javascript) 是一门脚本.解释性.动态类型.基于对象的语言 含三个部分: ECMAScript标准–java基本语法 DOM(Do ...

  5. JS实现购物车02

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

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

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

  7. Node.js abaike图片批量下载Node.js爬虫1.01版

    //====================================================== // abaike图片批量下载Node.js爬虫1.01 // 1.01 修正了输出目 ...

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

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

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

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

随机推荐

  1. jQuery层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. centos7下安装redis的步骤

    原贴地址:https://www.cnblogs.com/zuidongfeng/p/8032505.html 我linux服务器上是这样启动的: cd /tool/redis/redis-3.2.8 ...

  3. 调用Bartender服务并打印bartender标签

    通常大部分企业在生产,仓储,QC等运作环节会用到标签,标签上有些各种标识. 一般的企业都有配有标签软件+专用的标签打印机.此例以bartender为例子. 如果为了实现打印条码,或者显示具体的功能,用 ...

  4. java实现《剑指offer》（一）1~10

    每段代码都是在牛客网在线编程通过后,然后拷过来的,准确性可以保证. 1.二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入 ...

  5. baiduTemplate.js 百度JS模板引擎

    baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...

  6. VUE2.0 饿了吗视频学习笔记（二）：新版本添加路由和显示Header

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...

  7. 修改mysql的用户root密码

    第一种方法:root用户登录系统/usr/local/mysql/bin/mysqladmin -u root -p password 新密码enter password 旧密码 第二种方法:root ...

  8. C语言文件操作详解

    C语言中没有输入输出语句,所有的输入输出功能都用 ANSI C提供的一组标准库函数来实现.文件操作标准库函数有: 文件的打开操作 fopen 打开一个文件 文件的关闭操作 fclose 关闭一个文件 ...

  9. mysql 案例 ~ pt校验工具介绍

    简介:今天咱们来聊聊PT校验工具pt-table-checksum 注意事项:    1. 根据测试,需要一个即能登录主库,也能登录从库的账号:    2. 只能指定一个host,必须为主库的IP:  ...

  10. SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png

    在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器.因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张 ...