简单购物车JS实现

大家好，我还是那个小白，这个国庆黄金周，我利用目前所学的一些知识，写了一个表格式的简单购物车： HTML:

编号名称单价个数小计 JS： let dataArr = [ { num: 1, name: "可乐", price: 100, count: 1 }, { num: 2, name: "奶茶", price: 200, count: 1 }, { num: 3, name: "咖啡", price: 300, count: 1 }, { num: 4, name: "神油", price: 400, count: 1 } ];

let tbEle = document.querySelector(“tbody”); //渲染函数 function dataRender() { tbEle.innerHTML = “”; let money = 0; for (let index in dataArr) { let newTr = document.createElement(“tr”); newTr.innerHTML = <td>${dataArr[index].num}</td> <td>${dataArr[index].name}</td> <td>${dataArr[index].price}</td> <td> <input type="button" value="-" data-index="${index}"> <input type="text" value="${dataArr[index].count}" style="width:20px"> <input type="button" value="+" data-index="${index}"> </td> <td>${dataArr[index].price * dataArr[index].count}</td>; tbEle.appendChild(newTr); //累计小计的合 money += dataArr[index].price * dataArr[index].count; } let newTr = document.createElement(“tr”); newTr.innerHTML = <td colspan="4" style="text-align:right">合计:</td> <td>${money}</td> tbEle.appendChild(newTr); } dataRender();

//事件委托 let tbEles = document.querySelectorAll(“table”); tbEle.addEventListener(“click”, options);

//点击button改变数量，重新渲染 function options(e) { let event = e || window.event //判断是否点击的是减号，并且数量大于等于1 if (event.target.value == “-” && dataArr[event.target.dataset.index - 0].count > 1) { event.target.nextElementSibling.value–; //dataset.index被点击商品的下标 dataArr[event.target.dataset.index - 0].count–; dataRender(); } else if (event.target.value == “+”) { //判断是否点击的是加号 let num = event.target.previousElementSibling.value; event.target.previousElementSibling.value = num - 0 + 1; dataArr[event.target.dataset.index - 0].count++; dataRender(); } } 如果有什么问题，还请给位大佬纠正。