需求

使用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. java 中自定义类的概述

    作业: 描述商品类 Goods 4个属性 商品名字 大小 价格 库存 把商品类放进集合中 小米品牌 大小 价格 库存的数量 都存集合 华为..... 魅族 public class Goods{ St ...

  2. 自动检测ie低版本，并显示升级浏览器的自定义页面，当用f12再把浏览器版本提高的时候，又会自动显示正常的页面。

    代码: <!--[if lte IE 9 ]> <div class=""> //这里面可以添加自己定义的内容 </div> <scrip ...

  3. python的异常处理try/except 万能处理exception

    1.try方式 try: age=int(input(">>>")) int(age)#主逻辑 num=input(">>>>& ...

  4. Hadoop基础-完全分布式模式部署yarn日志聚集功能

    Hadoop基础-完全分布式模式部署yarn日志聚集功能 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实我们不用配置也可以在服务器后台通过命令行的形式查看相应的日志,但为了更方 ...

  5. centos 重启日志服务

    因为/var/log/message日志太多了,遂手贱删掉了这个文件,新建messages,发现没有日志写入 正确清空日志的方法 cat /dev/null > /var/log/boot.lo ...

  6. Shell + crontab 实现日志压缩归档

    Shell + crontab 实现日志压缩归档 crontab # archive the ats log days. */ * * * * root /bin/>& shell #! ...

  7. 在Eclipse中利用maven整合搭建ssm框架

    首先说明用到的框架: spring  +  springMVC  +  mybatis 构建工具:maven 开发工具:eclipse 开发环境:win10      java版本:jdk1.8    ...

  8. MyBatis编写映射文件实现增删改操作 附说明及代码

    1.看一下我们接口 package cn.bdqn.mybatis.dao; import org.apache.ibatis.annotations.Select; import cn.bdqn.m ...

  9. qemu基本使用

    1.qemu的安装 请参考家用路由器0day漏洞挖掘技术这本书 2.基本使用 qemu有主要如下两种运作模式: 用户模式(User Mode),亦称使用者模式.qemu能启动那些为不同中央处理器编译的 ...

  10. Java——Struts2 crud 简单实例(学习struts2和ssh) 用Myeclipse实现

    1.new web project 2.给新建的web项目添加struts2支持 3.项目结构中有了struts.xml和struts2核心库 4.编码 4.1项目结构图 4.2源代码: (1)DbU ...