一、首先渲染出商品列表数据
通过拼接和循环就得到表格了
添加一点简单的css样式让表格看得过去
大概效果如图所示
这一步我们先获取当前点击的节点信息，然后通过js生成节点，再拼接到购物车表头下面
在做个判断，
先建立一个空数组，因为商品的编号是唯一的，所以点购买商品就判断一下数组里有没有商品的编号，有就value+1，否则就生成新的一行
通过some方法判断数组里的数有没有重复
加号和减号按钮绑定事件
因为是渲染生产的，所有我直接给按钮里绑定了
小计通过获取当前这一行的value和单价相乘，总价则获取所有的小计相加
通过数组做累加，每次改变都调用一次
这里通过正则和if判断一下就行，给输入框绑定事件
当然为了总价小计不出错报错时给value更改为1
删除按钮通过绑定事件来找到当前行在删除就行，再调用一下总价函数,还要记得清除数组里对应的数据
这样一个简单的商品购买系统就完成了
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } table { border-collapse: collapse; margin: 0 auto; text-align: center; } thead { background-color: #888; } th { width: 100px; height: 40px; } td { width: 100px; height: 40px; } .car { margin: 20px auto; width: 604px; } input { outline: none; } .car input { width: 50%; } .cz>button { width: 15px; height: 15px; line-height: 15px; text-align: center; margin: 2px; } #totle_span { font-size: 18px; font-weight: 500; } </style> <script src="./piugin/jquery.js"></script> </head> <body> <input type="text" onclick=""> <script> var goods = [ { "goodsId": "1000100", "goodsName": "方便面", "goodsPrice": 2.5, "address": "河南", "goodsDate": "2020-01-01", }, { "goodsId": "1000101", "goodsName": "火腿肠", "goodsPrice": 3, "address": "河北", "goodsDate": "2021-01-01" }, { "goodsId": "1000102", "goodsName": "面包", "goodsPrice": 5, "address": "湖南", "goodsDate": "2020-03-01" }, { "goodsId": "1000103", "goodsName": "冰红茶", "goodsPrice": 3, "address": "福建", "goodsDate": "2020-05-01" }, { "goodsId": "1000104", "goodsName": "绿茶", "goodsPrice": 3, "address": "江西", "goodsDate": "2020-01-02" }, { "goodsId": "1000105", "goodsName": "可口可乐", "goodsPrice": 3, "address": "湖北", "goodsDate": "2020-01-05" } ] //创建节点 let body = document.querySelector("body"); //渲染表格 let tablestr = ` <table border="1"> <thead> <tr> <th>商品编号</th> <th>商品名称</th> <th>商品单价</th> <th>商品产地</th> <th>生产日期</th> <th>操作</th> </tr> </thead>` for (let i = 0; i < goods.length; i++) { tablestr += ` <tr> <td>${goods[i].goodsId}</td> <td>${goods[i].goodsName}</td> <td>${goods[i].goodsPrice}</td> <td>${goods[i].address}</td> <td>${goods[i].goodsDate}</td> <td><button onclick="add(this)">购买商品</button></td> </tr> ` } let tend = `</table>` tablestr+=tend body.innerHTML = tablestr //购物车头部 let shoppinghead = `<div class="car"> <table border="1" cellspacing="0" id="TB"> <tr> <th width="200">商品名字</th> <th width="150">商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>小计</th> <th>操作</th> </tr> </table> <div>合计:<span id="totle_span"></span></div> </div>` body.innerHTML += shoppinghead //获取节点 let shopping_ = $(".car>div"); //购物车列表数据 var shopCartArr = []; //点击事件添加节点 function add(th) { let a = $(th).parent().siblings().first().html()//编号 let b = $(th).parent().siblings().first().next().html()//名字 let c = $(th).parent().siblings().first().next().next().html()//单价 //总价的span let tot_s = document.querySelector("#totle_span"); //购物商品节点 let shopping = `<tr> <td>${a}</td> <td>${b}</td> <td>${c}</td> <td class="cz"><button onclick="addval(this)">+</button><input type="text" class="t${a}" value="1" oninput="inpnum(this)"><button onclick="reduce(this)">-</button></td> <td class="sub">${c}</td> <td><button onclick="del(this)">删除商品</button></td> </tr>` //如果商品已经添加，则value+1 let res = shopCartArr.some((ele, idx, arr) => { return ele == a }) // console.log(res); if (res) { $(`.t${a}`).prop("value", Number($(`.t${a}`).val()) + 1); //小计 let total = Number($(`.t${a}`).val()) * Number(c) let sub = document.querySelector(`.t${a}`).parentElement.nextElementSibling sub.innerHTML = total //总价 tot_s.innerHTML = Sum(); } else { let curentTr = document.createElement("tr") curentTr.innerHTML += shopping $('.car table tr:last').after(curentTr) //总价 tot_s.innerHTML = Sum(); shopCartArr.push(a); } } //删除节点 function del(th) { $(th).parent().parent().remove(); //总价的span let tot_s = document.querySelector("#totle_span"); tot_s.innerHTML = Sum(); //数组数据清除 let tid = th.parentElement.parentElement.firstElementChild.textContent; let idx = shopCartArr.indexOf(tid); shopCartArr.splice(idx, 1) } //输入框判断 function inpnum(e) { //禁止输入非数字 let value = e.value; let regx = /^\d+$/ //总价的span let tot_s = document.querySelector("#totle_span"); //小计的节点 let total_ = e.parentElement.nextElementSibling //当前商品的单价 let price = $(e).parent().prev().text() if (regx.test(value) || value == "") { if (value > 100) { alert('数量必须在1——100之间') e.style.backgroundColor = "red" e.value = 1 } else { e.style.backgroundColor = "white" //小计 let total = Number(value) * Number(price) total_.innerHTML = total //总价 tot_s.innerHTML = Sum(); } } else { alert('数量必须是数值') e.style.backgroundColor = "red" e.value = 1 //小计 total_.innerHTML = price //总价 tot_s.innerHTML = price } } //加号按钮 function addval(th) { $(th).next().prop("value", Number($(th).next().val()) + 1); //小计 let total = Number($(th).next().val()) * Number($(th).parent().prev().text()) let total_ = th.parentElement.nextElementSibling total_.innerHTML = total //总价的span let tot_s = document.querySelector("#totle_span"); //总价 tot_s.innerHTML = Sum(); //样式 th.nextElementSibling.style.backgroundColor = "white" } //减号按钮 function reduce(th) { if ($(th).prev().val() > 1) { $(th).prev().prop("value", Number($(th).prev().val()) - 1); //小计 let total = Number(Number($(th).prev().val())) * Number($(th).parent().prev().text()) let total_ = th.parentElement.nextElementSibling total_.innerHTML = total //总价的span let tot_s = document.querySelector("#totle_span"); //总价 tot_s.innerHTML = Sum(); } else { alert("最后一件了"); //样式 th.previousElementSibling.style.backgroundColor = "white" } } //总价 function Sum() { //所有的小计 let per = document.getElementsByClassName("sub"); per = Array.from(per)//类数组转换真数组 let sum = 0; //数组总和 per.forEach(element => { const perNum = +element.textContent sum += perNum }); return sum } </script> </body> </html>
