首先声明这仅仅只是个人理解而已，有什么错误或者缺少大家尽管在评论区发出来，共同学习，一起进步。
首先呢？我们要创建一个HTML基础代码。
基础HTML代码模板如下：他是比较关键的，是我们接下来了解的属性相关，可以直接复制拿来用的哈，它的意义就是搭载接下来的属性。
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr> <th>名称</th> <th>价格</th> <th>打折</th> <th>数量</th> <th>操作</th> </tr> <tbody id="ProductInfo"> </tbody> <div class="wrap clearfix"> <tfoot> <tr> <td></td> <td id="FooterSum">总价：￥<span id="prices">0</span></td> <td></td> <td>总数量：<span id="nums">0</span></td> <td></td> </tr> </tfoot> <div> <button id="product">添加商品</button> <div id="shopbox"> <button id="pushbut">添加</button> <button id="cancel">取消</button> <input type="text" id="shoptext" placeholder="请输入商品名称"> <input type="number" id="shopprice" placeholder="请输入商品价格"> <input type="number" id="rebate" placeholder="请输入商品折扣"> <input type="number" id="shopnum" placeholder="请输入商品数量"> </div> </div> </body> </html>
CSS：
* { margin: 0px; padding: 0px; } a { text-decoration: none; } .wrap { width: 1180px; margin: 0 auto; } td, tr { border: 1px solid black; } table{ margin-left: 11.5%; } th, td { width: 235px; height: 50px; text-align: center; } span { padding: 0px 10px; } .cut, .add, .collect, .delete { padding: 5px; margin: 7px; } #product { padding: 10px; margin-left: 11.5%; } #pushbut�cancel { padding: 5px; } #shopbox { display: none; } #shopbox{ margin-left: 11.5%; }
接下来就是最重要的JS部分：
我们先创建一个数组，我们在这个数组上进行操作
let Data = [{ num: 0, price: 5000, discount: 85, name: '鸭梨X', id: 1, }, { num: 0, price: 100, discount: 75, name: 'GB003', id: 2, }, { num: 0, price: 20, discount: 50, name: '六神花露水', id: 3, } ]
获取到DOM进行渲染操作
let ProductInfo = document.querySelector('#ProductInfo'); let prices = document.querySelector('#prices'); let nums = document.querySelector('#nums'); let addition = document.querySelector('#product'); let shopbox = document.querySelector('#shopbox'); function func(arr) { ProductInfo.innerHTML = ''; let Str = '' for (let i = 0; i < arr.length; i++) { Str += '<tr class="RowList"><td class="shopnamenow">' + arr[i].name + '</td>' + '<td>￥<span class="shopPriceNow">' + arr[i].price + '</span></td>' + '<td>' + Data[i].discount + '%</td>' + '<td class="bcc"><button class="cut" onclick="sub(' + i + ')">-</button><strong class="shopNumNow">' + Data[i].num + '</strong><button class="add" onclick="Add(' + i + ')">+</button></td>' + '<td><button class="collect">编辑</button><button class="delete" onclick="dele(' + i + ')">删除</button></td></tr>' } ProductInfo.innerHTML = Str; } func(Data);
效果图如下：
数量操作部分：
let pushbut = document.querySelector('#pushbut') let cancel = document.querySelector('#cancel') var del = document.querySelectorAll('.del'); // 增加计算 function Add(i) { let RowNum = document.querySelector('#ProductInfo'); let shopNum = RowNum.getElementsByTagName('strong'); Data[i].num++; shopNum[i].innerHTML = Data[i].num; amount++; nums.innerHTML = amount; totalPrices += Data[i].price; prices.innerHTML = totalPrices } // 减少计算 function sub(i) { if (Data[i].num > 0) { Data[i].num--; totalPrices -= Data[i].price; amount--; prices.innerHTML = totalPrices; nums.innerHTML = amount; } let RowNum = document.querySelector('#ProductInfo'); let shopNum = RowNum.getElementsByTagName('strong'); shopNum[i].innerHTML = Data[i].num; }
删除和添加商品：
// 删除操作 function dele(i) { if (Data[i].num > 0) { totalPrices -= (Data[i].price * Data[i].num); amount -= Data[i].num; prices.innerHTML = totalPrices; nums.innerHTML = amount; } Data.splice(i, 1) func(Data); } // 添加数据 let totalPrices = 0; let amount = 0; addition.onclick = function() { shopbox.style.display = 'block'; addition.style.display = 'none'; } cancel.onclick = function() { shopbox.style.display = 'none'; addition.style.display = 'block'; } let nullShop = NaN; pushbut.onclick = function() { let shopnum = document.querySelector('#shopnum').value; let shopprice = document.querySelector('#shopprice').value; let shoptext = document.querySelector('#shoptext').value; let rebate = document.querySelector('#rebate').value; if (shopnum != '' || shopprice != '' || rebate != '' || shoptext != '') { Data.push({ num: parseInt(shopnum), discount: parseInt(rebate), price: parseInt(shopprice), name: shoptext, }) amount = parseFloat(amount) + parseFloat(shopnum); nums.innerHTML = amount; totalPrices += parseFloat(shopnum) * parseFloat(shopprice); prices.innerHTML = totalPrices; func(Data) } else { alert(' * 未添加商品信息 * '); } }
不多说我们直接看效果：
