js实现基础购物车的制作
功能需求：
1.点击添加商品按钮会出现三个输入框（名称，价格，数量那三格，以及确认和取消按钮）。
2.点击确认后所输入的值会自动形成一行添加到表格中
3.点击编辑按钮时，会重新编辑这一行的数据信息
4.点击加号按钮时总价和总数会变化，减号按钮会显示
5.点击减号按钮时总价和总数会变化
6.点击删除按钮时这行都会被删除，并且总价和总数会减小
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.7.1.min.js"></script><style>.one {display: flex;justify-content: center;align-items: center;}.one button {width: 3vh;height: 3vh;margin: 0 5px;}.two button {margin-left: 5px;}</style></head><body><table border="1px" cellpadding="5" cellspacing="0"><thead align="center"><tr><td><input type="checkbox" onclick="shoppingOne()" id="all" /></td><td>名称</td><td>价格</td><td>数量</td><td>操作</td></tr></thead><tbody align="center"><!-- <tr><td><input type="checkbox" /></td><td>聂聂脸</td><td>￥999</td><td class="one"><button>-</button><p>1</p><button>+</button></td><td class="two"><button>编辑</button><button>删除</button></td></tr> --></tbody><tfoot align="center"><tr><td></td><td></td><td id="allPrice">总价:￥0</td><td id="allNum">总数:0</td><td></td></tr></tfoot></table><button onclick="addShop()">添加商品</button><div class="three" style="display: none;"><input id="name" type="text" placeholder="请输入商品名称" /><!-- onkeyup这代码是用户在输入框输入内容时，判断输入的是否是数字和小数点，如果不是就会被删除掉 --><input id="price" type="number" placeholder="请输入商品价格"onkeyup="this.value = this.value.replace(/[^0-9\.]/g,'')" /><input id="num" type="number" placeholder="请输入商品数量"onkeyup="this.value = this.value.replace(/[^0-9\.]/g,'')" /><button onclick="sub()">提交</button><button onclick="quxiao()">取消</button></div><script>let xb = 0;// 总价 总数let allPrice, allNum;// 用来判断是添加还是编辑的状态let status = true;// 假数据let data = [{"name": "长舌妇","price": "60","num": "1"}, {"name": "芭比公主","price": "22","num": "1"}, {"name": "大便超人","price": "30","num": "1"}]console.log(data);// 调用渲染函数rander();// 渲染函数function rander() {let str = '';for (let i = 0; i < data.length; i++) {str += `<tr><td><input type="checkbox" name="check" class="item" onclick="fn(${i})"/></td><td>${data[i].name}</td><td>${data[i].price}</td><td class="one"><button onclick="jian(${i})">-</button><p class="text">${data[i].num}</p><button onclick="add(${i})">+</button></td><td class="two"><button onclick="bianji(${i})">编辑</button><button onclick="deletes(${i})">删除</button></td></tr>`;}document.getElementsByTagName('tbody')[0].innerHTML = str;}// 单let check = document.getElementsByName('check');// 全let all = document.getElementById('all');// 全选的点击事件function shoppingOne() {if (all.checked == true) {for (let i = 0; i < check.length; i++) {check[i].checked = true;}} else {for (let i = 0; i < check.length; i++) {check[i].checked = false;}}}// 单选的点击事件let arr = [];function fn(i) {for (let a = 0; a < check.length; a++) {if (check[a].checked == false) {all.checked = false;arr.push(data[i]);return;}}console.log(arr);all.checked = true;}// 加事件function add(i) {data[i].num++;// 数量渲染到页面$(".text").eq(i).html(data[i].num);// 调用总价函数allPrices();}// 减事件function jian(i) {// 判断商品数量大于1时减if (data[i].num > 1) {data[i].num--;// 数量渲染到页面$(".text").eq(i).html(data[i].num);// 数量小于1时删除这个商品} else {// 第一个参数是删谁，第二个是删几个data.splice(i, 1);// 渲染页面rander();}// 调用总价函数allPrices();}// 总价函数allPrices()function allPrices() {allPrice = 0;allNum = 0;for (let i = 0; i < data.length; i++) {allPrice += parseFloat(data[i].price) * parseFloat(data[i].num);allNum += parseFloat(data[i].num);}$("#allPrice").html(`总价:￥${allPrice}`);$("#allNum").html(`总数:${allNum}`);}// 添加商品点击事件function addShop() {name.value = "";price.value = "";num.value = "";$(".three").css("display", "block");// 点击添加商品时为truestatus = true;}// 取消点击事件function quxiao() {// 让输入框隐藏$(".three").css("display", "none");// 并且清空输入框的值name.value = "";price.value = "";num.value = "";}// 获取三个输入框let name = document.getElementById('name');let price = document.getElementById('price');let num = document.getElementById('num');// 编辑点击事件function bianji(i) {$(".three").css("display", "block");// 点击是编辑是为falsestatus = false;xb = i;name.value = data[i].name;price.value = data[i].price;num.value = data[i].num;}// 删除事件function deletes(i) {data.splice(i, 1);rander();}// 提交的点击事件function sub() {// 判断三个输入框不等于空的时候if (name.value != "" && price.value != "" && num.value != "") {// 判断点击的是添加商品时if (status == true) {// 往数组里面添加一个对象（对象的内容是输入框的值）data.push({name: name.value,price: price.value,num: num.value})console.log(data);// 否则就是点击的是编辑并且回显} else {data[xb].name = name.value;data[xb].price = price.value;data[xb].num = num.value}// 输入框不为空（添加成功过后渲染页面，隐藏并且清空input；）rander();allPrices();name.value = "";price.value = "";num.value = "";$(".three").css("display", "none");// 否则就提示先填写} else {alert("请填写内容！");}rander();allPrices();}</script></body>
</html>