需求

使用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. 关于checkbox全选与全不选的实现与遇到的问题

    HTML: <div class="outbox"> <label for="box">全选</label> <inp ...

  2. 13 款高逼格且实用的 Linux 运维必备工具

    转载于民工哥技术之路 1. 查看进程占用带宽情况 - Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽. 下载:http://sourceforge.ne ...

  3. sklearn10-使用总结

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  4. 远程客户端连接MysqL数据库太慢解决方案

    远程客户端连接MysqL数据库太慢解决方案局域网客户端访问mysql 连接慢问题解决. cd /etc/mysql vi my.conf [mysqld] skip-name-resolve 此选项禁 ...

  5. centos7环境下开启指定端口

    参考原博:https://www.cnblogs.com/eaglezb/p/6073739.html 查看已经开放的端口: firewall-cmd --list-ports 开启端口 firewa ...

  6. Hive记录-Hive常用命令操作

    1.hive支持四种数据模型 • external table ---外部表:Hive中的外部表和表很类似,但是其数据不是放在自己表所属的目录中,而是存放到别处,这样的好处是如果你要删除这个外部表,该 ...

  7. MySQL聚合函数、控制流程函数

    [正文] 一.navicat的引入:(第三方可视化的客户端,方便MySQL数据库的管理和维护) NavicatTM是一套快速.可靠并价格相宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设 ...

  8. POJ - 1426 Find The Multiple（搜索+数论）

    转载自:優YoU  http://user.qzone.qq.com/289065406/blog/1303946967 以下内容属于以上这位dalao http://poj.org/problem? ...

  9. modbus-vcr介绍

    相关链接:modbus-vcr modbus-vcr是一个Ettercap的插件,被使用在缺少数据完整性的工业控制系统协议方面. 这个Ettercap插件执行一个MITM攻击在使用Modbus协议的系 ...

  10. android contentprovider内容提供者

    contentprovider内容提供者:让其他app可以访问私有数据库(文件) 1.AndroidManifest.xml 配置provider <?xml version="1.0 ...