需求

使用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. 织梦dedecms自定义搜索可以按照附加表字段进行搜索

    因为需要在网上搜索了一下找到此修改方法: 首先 是新建模型:商标信息 模型:附加表为dede_shangbiao ,附加字段先添加了2个,sbID(商标ID)和chuangyi(创意说明)然后 打开需 ...

  2. struts下载

    struts下载地址:http://struts.apache.org/download.cgi

  3. 拒绝了对对象 'Proc_LHDashBoard' (数据库 'jy',架构 'dbo')的 EXECUTE 权限。”

    没有权限,在数据库里面开启权限.找到你那个访问的用户名,然后:

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

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

  5. mysql常用sql汇总

    给一张表新增一个字段 ALTER table student add zz INT() DEFAULT COMMENT '0是授权 1未授权' 给表student 新增一个zz的字段 默认是0 后面是 ...

  6. Array map()方法

    这里的map不是“地图”的意思,而是“映射”.“映射”就是原数组被“映射”成对应新数组. [].map()基本用法跟forEach类似. map()方法返回一个新数组,数组中的元素为原始数组元素调用函 ...

  7. .Net进阶系列(15)-异步多线程(线程的特殊处理和深究委托赋值)（被替换）

    1. 线程的异常处理 我们经常会遇到一个场景,开启了多个线程,其中一个线程报错,导致整个程序崩溃.这并不是我们想要的,我需要的结果是,其中一个线程报错,默默的记录下,其它线程正常进行,保证程序整体可以 ...

  8. .Net进阶系列(14)-异步多线程(async和await)（被替换）

    1.  方法名前只有async,但是方法中Task实例前没有await关键字,该方法和普通方法没有什么区别,但是会报一个警告. #region 情况一 /// <summary> /// ...

  9. 006、容器 What、Why、How（2018-12-21 周五）

    参考https://www.cnblogs.com/CloudMan6/p/6751516.html   What - 什么是容器?       容器是一种轻量级.可移植.自包含的软件打包技术,是应用 ...

  10. HashMap分析及散列的冲突处理

    1,Hashing过程 像二分查找.AVL树查找,这些查找算法的时间复杂度为O(logn),而对于哈希表而言,我们一般说它的查找时间复杂度为O(1).那它是怎么实现的呢?这就是一个Hashing过程. ...