<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
margin: 0 auto;
}
table {
50%;
margin-top: 30px;
}
th {
background-color: rgb(7, 243, 38);
}
th,
tr {
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" cellspacing="0" id="tab1">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>烧煎饼</td>
<td><button>-</button><span class="goods-num">0</span><button>+</button></td>
<td>单价：<span class="goods-psrice">2</span></td>
<td>小计：<span class="goods-single-price">0</span></td>
<td>操作：<input type="button" value="删除" class="sel"></td>
</tr>
<tr>
<td>水煮鱼</td>
<td><button>-</button><span class="goods-num">0</span><button>+</button></td>
<td>单价：<span class="goods-price">15</span></td>
<td>小计：<span class="goods-single-price">0</span></td>
<td>操作：<input type="button" value="删除" class="sel"></td>
</tr>
</tbody>
<tr>
<td colspan="5">一共<span id="goods-total-num">0</span>件商品，共计花费<span id="goods-total-price">0</span>元</td>
</tr>
</table>
<!-- 第二个表格 -->
<table id="tab2" cellspacing=0 cellpadding=0 border="">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>烧饼</td>
<td>单价：<span>9</span></td>
<td>操作：<input type="button" id="addbtn" value="添加"></td>
</tr>
<tr>
<td>2</td>
<td>孜然烤肉</td>
<td>单价：<span>22</span></td>
<td>操作：<input type="button" id="addbtn" value="添加"></td>
</tr>
</table>
</body>
</html>
<script>
class Cart {
//计算共有多少件商品
getGoodsnum() {
let OGoodsnum = document.getElementsByClassName("goods-num");
let goodstotalnum = 0;
for (let i = 0; i < OGoodsnum.length; i++) {
goodstotalnum += Number(OGoodsnum[i].innerHTML);
}
let oGoodstotalnum = document.querySelector("#goods-total-num");
oGoodstotalnum.innerHTML = goodstotalnum;
}
//计算共花费多少
getGoodsPrice() {
let Ogoodssingleprice = document.getElementsByClassName("goods-single-price");
let goodstotalprice = 0;
for (var i = 0; i < Ogoodssingleprice.length; i++) {
goodstotalprice += Number(Ogoodssingleprice[i].innerHTML);
}
let Ogoodstotalprice = document.querySelector("#goods-total-price");
Ogoodstotalprice.innerHTML = goodstotalprice;
}
//计算小计
getGoodsSinglePrice(num, price) {
return num * price;
}
//增加货物数量
Goodadd(btn) {
//获取btn前的货物数量
let goodsnum = btn.previousElementSibling;
goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1;
//获取单价
let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
//计算小计
let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
goodssingleprice.innerHTML = Ogoodssinglepc;
//点击增加数量的同时，总数量和总价也要变化
this.getGoodsnum();
this.getGoodsPrice();
}
//减少货物数量
Goodmin(btn) {
//获取btn前的货物数量
let goodsnum = btn.nextElementSibling;
goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1;
//获取单价
let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
//计算小计
let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
goodssingleprice.innerHTML = Ogoodssinglepc;
//点击增加数量的同时，总数量和总价也要变化
this.getGoodsnum();
this.getGoodsPrice();
}
//删除事件
select(sel) {
let otr = sel.parentNode.parentNode;
otr.remove();
//点击删除的同时，总数量和总价也要变化
this.getGoodsnum();
this.getGoodsPrice();
}
//测试绑定事件
testbtn() {
let obtn = document.querySelectorAll("button");
let that = this;
for (let i = 0; i < obtn.length; i++) {
if (i % 2 == 1) {
obtn[i].onclick = function () {
that.Goodadd(this);
}
} else {
obtn[i].onclick = function () {
that.Goodmin(this);
}
}
}
}
//删除事件
selbtn() {
let oselbtn = document.querySelectorAll(".sel");
let that = this;
for (let i = 0; i < oselbtn.length; i++) {
oselbtn[i].onclick = function () {
that.select(this);
}
}
}
}
var ca = new Cart();
//必须调用才有效果
// *****************************************************************
//第二个表格
class cartTwo {
addmenu() {
let oaddbtn = document.querySelectorAll("#addbtn");
let otab1 = document.querySelector("#tab1 tbody")//获取第一个表格
for (let i = 0; i < oaddbtn.length; i++) {
oaddbtn[i].onclick = function () {
let menuadd = this.parentNode.previousElementSibling.previousElementSibling;
let menupvice = this.parentNode.previousElementSibling;
//es6字符串拼接字符串
let str = `<tr>
<td>${menuadd.innerHTML}</td>
<td><button>-</button><span class="goods-num">0</span><button>+</button></td>
<td>${menupvice.innerHTML}</td>
<td>小计：<span class="goods-single-price">0</span></td>
<td>操作：<input type="button" value="删除" class="sel"></td>
</tr>`;
otab1.innerHTML += str;//将创建的字符串拼接到第一个表格的tbody中
// 调用事件
ca.selbtn();
ca.testbtn();
}
}
}
}
let cT = new cartTwo();
cT.addmenu();
</script>
