组件化的可编辑数据表格：购物车

实现案例：购物车

设计思路

• 先将可以放入购物车的物品导入json文件中
• html、css实现页面效果
  
• 最后通过js实现数据的交互

核心代码：数据添加

update() {
    //添加订单
    let btn = document.getElementsByClassName("update");
    let updateTable = document.getElementById("update-table");
    let god = document.getElementById("goods"); //获取goods的table;
    let gods = god.firstElementChild.children;
    let flag = false;
    let that = this;
    for (let i = 0; i < btn.length; i++) {
      btn[i].onclick = function () {
        for (let j = 0; j < gods.length - 1; j++) {
          //循环判断菜单中是否有这个菜，如果有这个菜则加1；
          if (
            gods[j].children[1].innerHTML ==
            this.parentNode.previousElementSibling.previousElementSibling
              .innerHTML
          ) {
            gods[j].children[2].children[1].innerHTML =
              " " +
              (Number(gods[j].children[2].children[1].innerHTML) + 1) +
              " ";
            that.getGoodsPriceAndUpdate();
            gods[j].children[4].innerHTML =
              '小计:<span class="goods-single-price">' +
              gods[j].children[2].children[1].innerHTML *
                gods[j].children[3].firstElementChild.innerHTML +
              "</span>";
            that.getGoodsPriceAndUpdate();
            that.getGoodsNumAndUpdate();
            flag = false;
            break;
          } else {
            flag = true;
          }
        }
        if (flag) {
          //如果没有这个菜则添加
          let tr = document.createElement("tr");
          tr.innerHTML =
            "<td>" +
            (gods.length - 1) +
            "</td>" +
            "<td>" +
            this.parentNode.previousElementSibling.previousElementSibling
              .innerHTML +
            '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>单价:<span class="goods-price">' +
            this.parentNode.previousElementSibling.innerHTML +
            '</span></td><td>小计:<span class="goods-single-price">' +
            this.parentNode.previousElementSibling.innerHTML +
            '</span></td><td>操作:<input type="button" class="deled" value="删除" /></td>' +
            "<td>" +
            this.parentNode.nextElementSibling.innerHTML +
            "</td>";
          god.firstElementChild.insertBefore(
            tr,
            god.firstElementChild.lastElementChild
          );
          that.eventBind();
          that.getGoodsPriceAndUpdate();
          that.getGoodsNumAndUpdate();
        }
      };
      //重新排序号
      for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
        updateTable.firstElementChild.children[i].firstElementChild.innerHTML =
          i;
      }
    }
  }

重点API：previousElementSibling和nextElementSibling

previousElementSibling

返回当前元素在其父元素的子元素节点中的前一个元素节点，如果该元素已经是第一个元素节点，则返回 null, 该属性是只读的。

nextElementSibling

返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 null, 该属性是只读的。

在此次项目中，在点击增加时，通过previousElementSibling和nextElementSibling找到当前元素前面和后面的元素节点，从而添加到购物车中。

总结

在我们日常开发中，经常会用到json文件的数据，先将数据文件写好"以数据驱动页面"。json文件方便修改数据从而提升开发效率。