需求

使用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. k8s技术--Kubernetes集群kubectl命令的常见使用方法

    简介:kubectl是一个命令行界面,用于运行针对Kubernetes群集的命令. 语法: kubectl [command] [TYPE] [NAME] [flags] command:指定您希望对 ...

  2. tcp的4次挥手、三次握手

    1. TCP短连接模拟一种TCP短连接的情况:1. client 向 server 发起连接请求2. server 接到请求,双⽅建⽴连接3. client 向 server 发送消息4. serve ...

  3. 5、JDBC-元信息

    DatabaseMetaData:描述数据库的元数据对象 获取所有数据库 import org.junit.jupiter.api.AfterEach; import org.junit.jupite ...

  4. ivew实现table的编辑保存追加删除

    ivew实现table的编辑 例子1 例子2

  5. SqlServer中的查询简单总结

    一.sql语句的执行顺序 查询时数据库中使用最多的操作,一条sql语句的查询顺序是 1.from Tb1 [ join on ]   得到查询的数据源 2.where    对数据过滤(单条数据上过滤 ...

  6. golang切片数据结构解释

    1. 切片:切片是数组的一个引用,因此切片是引用类型 func main() { var arr = [6]int{1, 2, 3, 4, 5} var slice = arr[1:] fmt.Pri ...

  7. Forth 语言概要 - Forth: An underview

    Forth 语言概要 - Forth: An underview 原作者 Peter Knaggs 原文标题< Forth: An underview > 译者: 未知 译文链接: htt ...

  8. @ImportResource 导入Spring 的xml配置文件

    在配置类尚标注此注解,等同于spring配置文件中的 <import resource="beans.xml"/> Spring Boot里面没有Spring的配置文件 ...

  9. .net 重新注册

    今天同事问 一个IIS 的监控站点 .net 出现问题:对于windows 一般都停留在重启生效思想:然并没有生效: 于是建议重新注册.NET : 一般出现原因: 在默认安装路径 重启注册: 默认的安 ...

  10. string字符串js操作

    String 对象方法 方法 描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. bold() 使用粗体显示字符串. charAt() ...