功能需求：
?? ??? ? 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>
)