组件化的可编辑数据表格

一、设计思路及实现方法

        1、首先采用<table>标签创建一个表单来建立购物车，其中包括商品名称、数量、单价、小计、操作五个板块；

        2、用JSON数据对象渲染菜单页面，遍历JSON，运用模板字符串在页面展示，让用户能够看到详细菜单；

        3、采用for循环遍历购物车中各商品数量、各商品的小计，再运用coutTotal函数返回商品小计；

        4、采用函数对购物车的菜品、数量进行增加、减少的操作，并对价格进行修改；

二、核心代码及注解

        1、

 注释：运用表格表单相关标签创建一个购物车表格，其中colspan用来设置表格的列数为5；

        2、

 注释：绑定JSON数据对象，通过调用JSON 文件来引入菜品信息，在运用for循环语句来依次遍历文件，使得每一个数据都输出；

        3、

 注释：运用for循环遍历购物车中各商品数量和商品的小计，再运用coutTotal函数将所有数返回到总价格中；

        4、

 注释：在购物车中点击删除可直接删除菜品，同时运用confirm来弹出提示框询问是否确定删除。

三、反思

        该课程项目存在一些问题，例如，不能直接在购物车里面对菜品的数量进行输入修改，需要在后续加以改进。