将数据渲染到页面上
然后先将格式写出来，分析得出是由一个tr包4个td组成的，将表头用thead包起来，后面写tbody将内容包起来后面的两个td内分别包了两个按钮，最后面有3个输入框和2个按钮（确认和取消），样式要写为display：none
然后将数据以数组包对象的形式写在json文件内
[{"id": "1","name": "包子","price": "2","num": "0"},{"id": "2","name": "油条","price": "3","num": "0"},{"id": "3","name": "鸡蛋","price": "1.5","num": "0"},{"id": "4","name": "胡辣汤","price": "3","num": "0"},{"id": "5","name": "小米粥","price": "1","num": "0"}
]我们先将要用到的都获取过来，并且将data的作用域提到全局，并且每次添加的时候都是在id后面添加，设置一个最大的id为数据内在最大的id（确保唯一性），ee
let data;let max_ID;// 获取弹窗let alerts = document.getElementById('ti_body');// 获取删除let dlt = document.getElementsByClassName('delete');// 获取数量+let append = document.getElementsByClassName('append');// 获取数量-let reduce = document.getElementsByClassName('reduce');// 获取tbodylet tbody = document.getElementById('goods');// 获取三个添加时的输入框let addname = document.getElementById('name');let addprice = document.getElementById('price');let addnum = document.getElementById('number');// 获取三个编辑是的输入框let addnames = document.getElementById('names');let addprices = document.getElementById('prices');let addnums = document.getElementById('numbers');// 获取添加按钮let add = document.getElementsByClassName('add')[0];// 添加输入框区域let content = document.getElementsByClassName('content')[0];// 编辑输入框区域let contents = document.getElementsByClassName('contents')[0];// 取消按钮let off = document.getElementsByClassName('off')[0];// 获取商品数量let how = document.getElementsByClassName('how')[0];// 总价框let total = document.getElementById('total');// 总数量框let tot = document.getElementById('tot');// 获取json文件let xhr = new XMLHttpRequest();xhr.open('get', 'js/new_file.json', true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;console.log(text);data = JSON.parse(text);max_ID = data[data.length - 1].idconsole.log(max_ID);console.log(data);render(data);}};将数据渲染到页面上，以字符串拼接的形式
function render(data) {let str = ``;let num = 0;let count = 0;for (let i = 0; i < data.length; i++) {str += `<tr><td>${data[i].name}</td><td>${data[i].price}</td><td><button class="reduce" onclick="cut_num(${i})">-</button> <span class="how">${data[i].num}</span> <button class="append" onclick="add_num(${i})">+</button></td><td><button class="edit" onclick="edit(${i})">编辑</button><button class="delete" onclick="del(${i})" >删除</button></td></tr>`;num += data[i].num * 1;count += data[i].num * data[i].price;}total.innerHTML = count;tot.innerHTML = num;tbody.innerHTML = str;};然后给按钮+绑定点击事件，当每次点击时，对应的下标index的num++
function add_num(index) {data[index].num++;render(data);};然后给按钮-绑定点击事件，当每次点击时，对应的下标index的num--
function cut_num(index) {if (data[index].num > 0) {data[index].num--;render(data);};};点击删除时，运用splice的方法，从对应下标删除，并且删除一个
function del(index) {data.splice(index, 1);render(data);};点击添加的时候，应该先将隐藏的输入框和按钮显示出来，并且清空里面的值
function add_show() {content.style.display = 'block'addname.value = '';addprice.value = '';addnum.value = '';};当点击取消时再将他们隐藏起来
function add_off() {content.style.display = 'none'}
接下来写确定添加的点击事件，按实际情况来说的话，我们商品名称不能为空；并且商品价格不能为空，不能小于0；商品数量不能为空，不能小于0，商品的价格不能为空，不能小于0，并且是整数，如果不符合条件的话弹出弹窗提示用户，所以我们的添加的点击事件要写判断，并且添加时使最大的id++，渲染完成后再让输入框和按钮隐藏
判断如下：
// 添加确定function add_confirm() {// 判断，如果第一个name输入框内为空返回弹窗if (addname.value == "") {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个商品！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)// 如果第二个为空或者数字小于0时返回弹窗} else if (addprice.value == "" || addprice.value < 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)// 如果数量为空，并且小于0，并且当他不为整数时返回弹窗} else if (addnum.value == "" || addnum.value < 0 || addnum.value % 1 != 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else {max_ID++;data.push({id: max_ID,name: addname.value,price: addprice.value,num: addnum.value})console.log(data);render(data);content.style.display = 'none';}}编辑按钮点击的时候，我们应该获取到他在哪一行，并且获取哪一行的数据，将数据传递到输入框内，并且将这个id存起来
function edit(i) {addnames.value = data[i].name;addprices.value = data[i].price;addnums.value = data[i].num;sessionStorage.setItem('edit_id', data[i].id)contents.style.display = 'block';};当我们编辑点确定的时候也需要判断，判断条件和上面的相同，如果所有的格式没有问题，那么将json中的id遍历一下，看看能不能找到和上面我们存的id相同，相同的话，再将内容进行替换并且重新渲染就好了
还有一种情况，我们点编辑后将这一条数据删除了，那么我们应该返回编辑失败
这种就先声明一个变量为false，当他在数据内能找到找个id将他变为true，这样就可以显示渲染，如果找不到那么就还是false，下面判断，如果当这个变量为false时，那么就返回弹窗，最后渲染时再将输入框隐藏即可
// 编辑判断function add_confirms() {if (addnames.value == "") {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个商品！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else if (addprices.value == "" || addprices.value < 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else if (addnums.value == "" || addnums.value < 0 || addnums.value % 1 != 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else {let a = false;for (let i = 0; i < data.length; i++) {if (data[i].id == sessionStorage.getItem('edit_id')) {data[i].name = addnames.value;data[i].price = addprices.value;data[i].num = addnums.value;a = true;break;}}if (a == false) {alerts.style.top = `0`alerts.innerHTML = `编辑失败！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)}contents.style.display = 'none';render(data);}};下面是全部的代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><style>#ti_body {top: -10%;left: 45vw;width: auto;height: 40px;background-color: red;color: white;text-align: center;line-height: 40px;padding: 3px 30px;border-radius: 0.25rem;position: fixed;z-index: 999;display: flex;justify-content: space-between;}</style><body><table border="1px" cellpadding="10px" style="border-collapse: collapse;"><thead><tr><th>商品名称</th><th>商品价格（单位为元）</th><th>商品数量</th><th>操作</th></tr></thead><tbody id="goods" style="text-align: center;"><tr><td></td><td>28</td><td><button class="reduce">-</button> <span class="how">0</span> <button class="append">+</button></td><td><button class="edit">编辑</button><button class="delete">删除</button></td></tr></tbody><footer><tr style="text-align: center;"><td>总价：</td><td id="total"></td><td>总数量：</td><td id="tot"></td></tr></footer></table><button class="add" onclick="add_show()">添加</button><div style="display: none;" class="content"><input type="text" placeholder="请输入商品名称" id="name" /><input type="number" placeholder="请输入商品价格" id="price" /><input type="number" placeholder="请输入商品数量" id="number" /><br /><button onclick="add_confirm()">确认</button><button class="off" onclick="add_off()">取消</button></div><div style="display: none;" class="contents"><input type="text" placeholder="请输入商品名称" id="names" /><input type="number" placeholder="请输入商品价格" id="prices" /><input type="number" placeholder="请输入商品数量" id="numbers" /><br /><button onclick="add_confirms()">确认</button><button class="off" onclick="add_offs()">取消</button></div><div id="ti_body"><div id="ti_content">成功提示的文案</div><div id="over" onclick="cancel()">×</div></div><script>let data;let max_ID;// 获取弹窗let alerts = document.getElementById('ti_body');// 获取删除let dlt = document.getElementsByClassName('delete');// 获取数量+let append = document.getElementsByClassName('append');// 获取数量-let reduce = document.getElementsByClassName('reduce');// 获取tbodylet tbody = document.getElementById('goods');// 获取三个添加时的输入框let addname = document.getElementById('name');let addprice = document.getElementById('price');let addnum = document.getElementById('number');// 获取三个编辑是的输入框let addnames = document.getElementById('names');let addprices = document.getElementById('prices');let addnums = document.getElementById('numbers');// 获取添加按钮let add = document.getElementsByClassName('add')[0];// 添加输入框区域let content = document.getElementsByClassName('content')[0];// 编辑输入框区域let contents = document.getElementsByClassName('contents')[0];// 取消按钮let off = document.getElementsByClassName('off')[0];// 获取商品数量let how = document.getElementsByClassName('how')[0];// 总价框let total = document.getElementById('total');// 总数量框let tot = document.getElementById('tot');// 获取json文件let xhr = new XMLHttpRequest();xhr.open('get', 'js/new_file.json', true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;console.log(text);data = JSON.parse(text);max_ID = data[data.length - 1].idconsole.log(max_ID);console.log(data);render(data);}};// 渲染函数function render(data) {let str = ``;let num = 0;let count = 0;for (let i = 0; i < data.length; i++) {str += `<tr><td>${data[i].name}</td><td>${data[i].price}</td><td><button class="reduce" onclick="cut_num(${i})">-</button> <span class="how">${data[i].num}</span> <button class="append" onclick="add_num(${i})">+</button></td><td><button class="edit" onclick="edit(${i})">编辑</button><button class="delete" onclick="del(${i})" >删除</button></td></tr>`;num += data[i].num * 1;count += data[i].num * data[i].price;}total.innerHTML = count;tot.innerHTML = num;tbody.innerHTML = str;};console.log(max_ID);// 添加次数function add_num(index) {data[index].num++;render(data);};// 减少function cut_num(index) {if (data[index].num > 0) {data[index].num--;render(data);};};// 删除function del(index) {data.splice(index, 1);render(data);};// 添加显示function add_show() {content.style.display = 'block'addname.value = '';addprice.value = '';addnum.value = '';};// 取消function add_off() {content.style.display = 'none'}function add_offs() {contents.style.display = 'none'}// 添加确定function add_confirm() {// 判断，如果第一个name输入框内为空返回弹窗if (addname.value == "") {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个商品！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)// 如果第二个为空或者数字小于0时返回弹窗} else if (addprice.value == "" || addprice.value < 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)// 如果数量为空，并且小于0，并且当他不为整数时返回弹窗} else if (addnum.value == "" || addnum.value < 0 || addnum.value % 1 != 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else {max_ID++;data.push({id: max_ID,name: addname.value,price: addprice.value,num: addnum.value})console.log(data);render(data);content.style.display = 'none';}}// 编辑效果function edit(i) {addnames.value = data[i].name;addprices.value = data[i].price;addnums.value = data[i].num;sessionStorage.setItem('edit_id', data[i].id)contents.style.display = 'block';};// 编辑判断function add_confirms() {if (addnames.value == "") {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个商品！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else if (addprices.value == "" || addprices.value < 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else if (addnums.value == "" || addnums.value < 0 || addnums.value % 1 != 0) {alerts.style.top = `0`alerts.innerHTML = `输入无效，请输入一个数字！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)} else {let a = false;for (let i = 0; i < data.length; i++) {if (data[i].id == sessionStorage.getItem('edit_id')) {data[i].name = addnames.value;data[i].price = addprices.value;data[i].num = addnums.value;a = true;break;}}if (a == false) {alerts.style.top = `0`alerts.innerHTML = `编辑失败！`setTimeout(function() {alerts.style.top = `-10%`}, 3000)}contents.style.display = 'none';render(data);}};</script></body>
</html>
