作业6(往dom里添加节点)

根据数据生成表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var arr = [{
            type_id: 1,
            name: "大菜",
            food: [{
                    food_id: 1,
                    name: "鱼香肉丝",
                    price: 10
                },

                {
                    food_id: 2,
                    name: "红烧肉",
                    price: 10
                },

                {
                    food_id: 3,
                    name: "香辣粉",
                    price: 10
                }

            ]
        }, {
            type_id: 2,
            name: "中菜",
            food: [{
                food_id: 4,
                name: "小炒肉",
                price: 13
            }, {
                food_id: 5,
                name: "云吞",
                price: 14
            }]
        }, {
            type_id: 3,
            name: '小菜',
            food: [{
                food_id: 6,
                name: "雪糕",
                price: 15
            }, {
                food_id: 7,
                name: "黄瓜",
                price: 16
            }]
        }]
        var tbody = document.querySelector("tbody");
        // 文档碎片
        var fragment = document.createDocumentFragment();

        for (var j = 0; j < arr.length; j++) {
            // 获取其中一个菜系对象
            var obj = arr[j];
            // 获取该对象的数组属性 
            var food = obj.food;
            // 循环数组
            // 将数据展示到页面上,就是创建元素然后上树的过程
            for (var i = 0; i < food.length; i++) {
                // console.log(food[i].price, food[i].name, obj.name);
                // 创建tr
                var tr = document.createElement("tr");
                // 创建三个td
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                // 第一个td放 菜系
                td1.innerHTML = obj.name;
                // 第二个td放 菜名
                td2.innerHTML = food[i].name;
                // 第三个td放 价格
                td3.innerHTML = food[i].price;
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                fragment.appendChild(tr);
            }
        }
        tbody.appendChild(fragment);
    </script>
</body>

</html>

非创建元素式渲染结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>
    <script>
        var arr = [
            {
                type_id: 1,
                name: "大菜",
                food: [
                    {
                        food_id: 1,
                        name: "鱼香肉丝",
                        price: 10
                    },

                    {
                        food_id: 2,
                        name: "红烧肉",
                        price: 10
                    },

                    {
                        food_id: 3,
                        name: "香辣粉",
                        price: 10
                    }

                ]
            },
            {
                type_id: 2,
                name: "中菜",
                food: [
                    {
                        food_id: 4,
                        name: "小炒肉",
                        price: 13
                    },
                    {
                        food_id: 5,
                        name: "云吞",
                        price: 14
                    }
                ]
            },
            {
                type_id: 3,
                name: '小菜',
                food: [
                    {
                        food_id: 6,
                        name: "雪糕",
                        price: 15
                    },
                    {
                        food_id: 7,
                        name: "黄瓜",
                        price: 16
                    }
                ]
            }
        ]
        var tbody = document.querySelector("tbody");
        var str = '';
        for (var j = 0; j < arr.length; j++) {
            // 获取其中一个菜系对象
            var obj = arr[j];
            // 获取该对象的数组属性 
            var food = obj.food;
            // 循环数组
            // 将数据展示到页面上,就是创建元素然后上树的过程
            for (var i = 0; i < food.length; i++) {
                str += 
                ["<tr>",
                    "<td>" + obj.name + "</td>",
                    "<td>" + food[i].name + "</td>",
                    "<td>" + food[i].price + "</td>",
                "</tr>"].join("");
            }
        }
        
        tbody.innerHTML = str;
    </script>
</body>

</html>

功能添加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .caozuo {
            width: 500px;
            margin: 0 auto;
            height: 20px;
            display: flex;
        }

        .caixi {
            flex: 2;
            min-width: 0;
        }

        .caiming {
            flex: 2;
            min-width: 0;
        }

        .jiage {
            flex: 1;
            min-width: 0;
        }

        .tianjia {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="caozuo">
        <input class="caixi" id="caixi">
        <input class="caiming" id="caiming">
        <input class="jiage" id="jiage">
        <input class="tianjia" id='addBtn' type="button" value="添加">
    </div>
    <script>
        // 获取元素
        var caixi = document.getElementById("caixi");
        var caiming = document.getElementById("caiming");
        var jiage = document.getElementById("jiage");
        var addBtn = document.getElementById("addBtn");

        // 添加事件给addBtn
        addBtn.onclick = function () {
            // 获取菜系菜名价格
            var cx = caixi.value;
            var cm = caiming.value;
            var jg = jiage.value;
            var obj = {
                type_id: 3,
                name: cx,
                food: [
                    {
                        food_id: 6,
                        name: cm,
                        price: jg
                    }
                ]
            }
            arr.push(obj);
            render();
        }
        var arr = [
            {
                type_id: 1,
                name: "大菜",
                food: [
                    {
                        food_id: 1,
                        name: "鱼香肉丝",
                        price: 10
                    },

                    {
                        food_id: 2,
                        name: "红烧肉",
                        price: 10
                    },

                    {
                        food_id: 3,
                        name: "香辣粉",
                        price: 10
                    }

                ]
            },
            {
                type_id: 2,
                name: "中菜",
                food: [
                    {
                        food_id: 4,
                        name: "小炒肉",
                        price: 13
                    },
                    {
                        food_id: 5,
                        name: "云吞",
                        price: 14
                    }
                ]
            },
            {
                type_id: 3,
                name: '小菜',
                food: [
                    {
                        food_id: 6,
                        name: "雪糕",
                        price: 15
                    },
                    {
                        food_id: 7,
                        name: "黄瓜",
                        price: 16
                    }
                ]
            }
        ]
        function render() {
            var tbody = document.querySelector("tbody");
            var str = '';
            for (var j = 0; j < arr.length; j++) {
                // 获取其中一个菜系对象
                var obj = arr[j];
                // 获取该对象的数组属性 
                var food = obj.food;
                // 循环数组
                // 将数据展示到页面上,就是创建元素然后上树的过程
                for (var i = 0; i < food.length; i++) {
                    str +=
                        ["<tr>",
                            "<td>" + obj.name + "</td>",
                            "<td>" + food[i].name + "</td>",
                            "<td>" + food[i].price + "</td>",
                            "</tr>"].join("");
                }
            }
            tbody.innerHTML = str;
        }
        render();
    </script>
</body>

</html>

功能按分类添加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        
        .caozuo {
            width: 500px;
            margin: 0 auto;
            height: 20px;
            display: flex;
        }
        
        .caixi {
            flex: 2;
            min-width: 0;
        }
        
        .caiming {
            flex: 2;
            min-width: 0;
        }
        
        .jiage {
            flex: 1;
            min-width: 0;
        }
        
        .tianjia {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="caozuo">
        <input class="caixi" id="caixi">
        <input class="caiming" id="caiming">
        <input class="jiage" id="jiage">
        <input class="tianjia" id='addBtn' type="button" value="添加">
    </div>
    <script>
        var arr = [{
            type_id: 1,
            name: "大菜",
            food: [{
                food_id: 1,
                name: "鱼香肉丝",
                price: 10
            }, {
                food_id: 2,
                name: "红烧肉",
                price: 10
            }, {
                food_id: 3,
                name: "香辣粉",
                price: 10
            }]
        }, {
            type_id: 2,
            name: "中菜",
            food: [{
                food_id: 4,
                name: "小炒肉",
                price: 13
            }, {
                food_id: 5,
                name: "云吞",
                price: 14
            }]
        }, {
            type_id: 3,
            name: '小菜',
            food: [{
                food_id: 6,
                name: "雪糕",
                price: 15
            }, {
                food_id: 7,
                name: "黄瓜",
                price: 16
            }]
        }]

        function render() {
            var tbody = document.querySelector("tbody");
            var str = '';
            for (var j = 0; j < arr.length; j++) {
                // 获取其中一个菜系对象
                var obj = arr[j];
                // 获取该对象的数组属性 
                var food = obj.food;
                // 循环数组
                // 将数据展示到页面上,就是创建元素然后上树的过程
                for (var i = 0; i < food.length; i++) {
                    str += ["<tr>",
                        "<td>" + obj.name + "</td>",
                        "<td>" + food[i].name + "</td>",
                        "<td>" + food[i].price + "</td>",
                        "</tr>"
                    ].join("");
                }
            }
            tbody.innerHTML = str;
        }
        render();

        // 获取元素
        var caixi = document.getElementById("caixi");
        var caiming = document.getElementById("caiming");
        var jiage = document.getElementById("jiage");
        var addBtn = document.getElementById("addBtn");

        // 添加事件给addBtn
        addBtn.onclick = function() {
            // 获取菜系菜名价格
            var cx = caixi.value;
            var cm = caiming.value;
            var jg = jiage.value;
            // 定义变量用于记录是否已经存在该分类
            var hasExist = false;
            // 循环已有分类
            for (var i = 0; i < arr.length; i++) {
                if (cx === arr[i].name) {
                    arr[i].food.push({
                            name: cm,
                            price: jg
                        })
                        // 把变量改为true
                    hasExist = true;
                }
            }
            // 通过变量进行判定 
            if (!hasExist) {
                arr.push({
                    type_id: 1,
                    name: cx,
                    food: [{
                        food_id: 1,
                        name: cm,
                        price: jg
                    }]
                })
            }
            render();
        }
    </script>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值