组件化的可编辑数据表格

一、实现效果

 二、实现原理

我们建立了两个实例化对象（购物车、菜单），将菜单的数据保存在json数组中，再通过Ajax调用，当我们触发增加或者删除按钮时，进行逻辑上的计算，然后通过函数进行显示化的展示。

三、核心代码

    class Menu {
            constructor() {//创建实例对象
                this.menus = [];
            }
            loadData() {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'menu.json', false);
                xhr.send();
                var data=xhr.responseText;
                data=JSON.parse(data);
                this.menus=data;
            }
            initHtml() {
                this.loadData();
                var cd = document.getElementById("CD");
                var html = ` <tr>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>操作</th>
                            </tr>`;
                for (var m of this.menus) {
                    html += `<tr>
                                <td style="text-align: center ;line-height:500%;">${m.name}<img src="${m.src}" alt=""></td>
                                <td>单价：<span class="CDprice">${m.price}</span></td>
                                <td>操作：<input class="CDadd" type="button" value="添加"></td>
                            </tr>`;
                }
                cd.innerHTML = html;
            }
        }//建立一个空的实例化对象（购物车），再调用函数进行添加

//菜单功能
            //添加
            Oadd(CDbut) {
                let that = this;
                //获取菜单中商品名称
                let OCDshoop = CDbut.parentNode.parentNode.firstElementChild;
                //获取菜单单价
                //获取 previousElementSibling 的 firstElementChild，这行代码可能获取待添加到购物车的商品的实际价格值
                let OCSprice = CDbut.parentNode.previousElementSibling.firstElementChild;
                //动态创建
                let Otbody = document.getElementById("GWC").firstElementChild;//获取tbody
                let Olasttr = Otbody.lastElementChild;//获取购物车最后一行
                let Otr = document.createElement("tr");//创建tr

                let OCDpName = document.getElementsByClassName("shopname");//获取购物车中所有的商品名

                let Oflagtext = false;//假设列表无重复

                for (let i = 0; i < OCDpName.length; i++) {
                    if (OCDpName[i].innerHTML == OCDshoop.innerHTML) {
                        //如果有重复的将按钮作为实参传递,调用添加商品函数
                        that.addgoods(OCDpName[i].nextElementSibling.lastElementChild);
                        Oflagtext = true;
                        break;
                    }
                }
                if (Oflagtext == false) {
                    Otr.innerHTML =
                        `<td class="shopname">${OCDshoop.innerHTML}</td>
            <td>
            <button class="butt" type="button">-</button>
            <span class="Num">0</span>
            <button class="butt" type="button">+</button>
            </td>
            <td>单价：<span class="price">${OCSprice.innerHTML}</span></td>
            <td>小计：<span class="total">0</span></td>
            <td>操作：<input class="del" type="button" value="删除"></td>
            `
                    Otbody.insertBefore(Otr, Olasttr);//将tr添加到tbody中倒数一行的之前
                    that.eventbind();
                }
            }

            addgoods(but) {//点击加按钮让数字累加
                let OaddNum = but.previousElementSibling;//获取Num元素
                OaddNum.innerHTML = Number(OaddNum.innerHTML) + 1;//点击一次让元素内容加一
                //找单价节点
                let OgoodsPrice = but.parentNode.nextElementSibling.firstElementChild;
                //找小计节点
                let OTotal = but.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                //计算小计
                OTotal.innerHTML = this.countTotal(OaddNum.innerHTML, OgoodsPrice.innerHTML);
                this.getTotalNum();
                this.gettotal();
            }
            mingoods(but) {
                let OminNum = but.nextElementSibling;//获取Num元素
                if (OminNum.innerHTML > 0) {
                    OminNum.innerHTML = OminNum.innerHTML - 1;//点击一次让元素内容减一
                    //找单价节点
                    let OgoodsPrice = but.parentNode.nextElementSibling.firstElementChild;
                    //找小计节点
                    let OTotal = but.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                    //计算小计
                    OTotal.innerHTML = this.countTotal(OminNum.innerHTML, OgoodsPrice.innerHTML);
                    this.getTotalNum();
                    this.gettotal();
                }
            }

四、总结

还需要进行购物车的数据存储，才是一个好的设计。