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

最新推荐文章于 2021-10-26 06:14:37 发布
最新推荐文章于 2021-10-26 06:14:37 发布
阅读量110 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48493160/article/details/109784894
版权

根据数据生成表格

<!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
    评论
专栏目录
JS(八)：DOM节点的增删改查与属性设值、作业【遮罩层】、【正反选】、【二级联动】
白骨梦儿
06-21 289
一、node的CURD(增、删、改、查)： 1.增 a、createElement(name)创建元素 b、appendChild();将元素添加 2.删 a、获得要删除的元素 b、获得它的父元素 c、使用removeChild()方法删除 3.改 第一种方式：使用增和删结合完成修改： replace(new标签，old标签)：用一个标签替换一个标签； 第二种方式： 使用s...
//吃货联盟订餐系统
Zhang080200的博客
07-11 407
package version;import java.lang.Thread.State;import java.net.StandardSocketOptions;import java.util.Scanner;public class Version2 { // 类变量 static User[] users = new User[5]; static Food[] foods = new...
jq根据json数据，动态生成一个二级联动菜单
web_hwg的博客
09-27 1713
jq根据json数据，动态生成一个二级联动菜单htmljson数据jq循环 html 蔬菜：<select name="vegetable" id="vegetable"> <option value="0">请选择类别一</option> </select> 水果：<select name="fruit" id="fruit"&gt...
Food
oldMean的博客
11-23 337
package alice.bw.com.day04_yuekaodemo.domain; import java.util.List; /** * Created by Me on 2017/11/22. */ public class Food { /** * ret : 1 * data : [{"id":"8289","title":"油焖大虾","
Android 客户端通过内置API（HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程...
07-20 56
************************************************************服务器端代码************************************************************************** Spring Web MVC(Servlet) 具体细节就不说了，比较不一样的地方，下面会注明！ 1. web.xml...
2021-01-11DOM节点操作
weixin_53125679的博客
01-17 196
文章目录一、DOM节点二、自定义获取元素节点三、操作元素节点的属性四、操作元素的类名五、操作元素节点中的内容 一、DOM节点 我们的页面是由节点组成的，每一个组成部分都是一个节点。 节点的分类： 元素节点 html标签 img body input div 文本节点 文字部分 属性节点 标签内的属性 注释节点 1.document 页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。 根节点。 2.html 页面中最大的元素节点。根元素节点。 3.元素节点 html标签 4.文本节
JS---DOM节点操作
m0_60237095的博客
10-26 75
一.定义 DOM ：文档对象模型 DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。 节点分为几种不同的类型 ： Node类型 Document类型 Element类型 Text类型——文本类型 Comment类型 —— 注释类型 二、类型的具体说明 Node类型 属性：1、nodeType ， 表示节点类型 规则： 1 -->E...
DOM操作作业.zip
最新发布
09-25
本作业“DOM操作作业.zip”可能包含了几个关于DOM操作的实践示例，如左侧手风琴菜单代码、选项卡滑动切换图片代码和游戏网站手风琴切换代码。这些代码实例可以帮助我们深入理解DOM的基本用法和常见应用。 首先，...
节点操作作业案例.zip
04-25
本案例“节点操作作业案例.zip”着重于jQuery中的节点操作，这是构建动态网页的关键技能。我们将深入探讨jQuery如何帮助我们更高效地处理HTML元素。 首先，了解jQuery中的节点操作涉及的主要概念： 1. **选择器...
FK-Rad：JS DOM家庭作业
02-20
6. **DOM修改** - 创建新元素：`document.createElement('tagname')`。 - 设置属性：`element.setAttribute('attr', 'value')`。 - 动态样式：`element.style.property = 'value'`。 7. **事件冒泡与事件捕获** ...
Wk6D5_hw_dom
02-15
6. **CSS选择器与DOM选择**：学习如何使用CSS选择器（如ID选择器，类选择器，标签选择器等）并在JavaScript中通过`querySelector`和`querySelectorAll`找到相应的DOM节点。 7. **DOM与JavaScript的结合**：理解如何...
jquery获取子节点和父节点的示例代码
10-26
在JavaScript的世界里，jQuery库提供了一系列简便的方法来操作DOM元素，包括获取子节点和父节点。这篇文章将聚焦于jQuery中如何获取子节点和父节点，这对于网页开发中的元素交互至关重要。 一、获取子节点 在...
js:ES6
weixin_48493160的博客
11-26 505
学习js第十三天 ES6是ECMAScript的第6个大版本 是2015年出现的 它对现有的代码做了非常大的改动 新增了很多新内容： 作用域、关键字、类、语法、等 ES6中新增了块级作用域 配合let关键字一起使用 { var a = 10; let b = 11; } console.log(a); console.log(b); // b is not defined let与var的区别 //
作业(字符串转为对象的方法)
weixin_48493160的博客
11-25 415
请写一个函数，传入url，返回如下对象 var url = 'cid=123&type="image"&startTime=2017'; //1 split var arr = url.split("&"); console.log(arr) var obj = {} for (var i = 0; i < arr.length; i++) { var key = arr[i].sp
案例(点名、抽奖)
weixin_48493160的博客
11-26 412
震惊程序员竟然用代码搞这个！！！
作业3(数组)
weixin_48493160的博客
11-13 366
加密 某个公司采用公用电话传递数据数据是四位的整数， 在传递过程中是加密的 加密规则如下： 每位数字都加上5 然后用除以10的余数代替该数字 再将第一位和第四位交换 第二位和第三位交换 请编写一个函数， 传入原文， 输出密文 1 5 3 9 6 10 8 14 6 0 8 4 4 0 8 6 4 8 0 6 function ji
作业2（函数）
weixin_48493160的博客
11-12 348
打印99乘法表 <script> // 1 打印99乘法表 function fun() { for (var i = 0; i <= 9; i++) { for (var j = 1; j < i + 1; j++) { document.write(j + '*' + i + '=' + j * i + '&nbsp;&nbsp;&am
作业5(DOM)
weixin_48493160的博客
11-18 298
震惊！！！ js竟然是这样！
java dom4j 添加节点
09-07
要使用Java DOM4J库向XML文档中添加节点，可以按照以下步骤进行操作： 1. 首先，获取文档的根节点。可以使用`document.getRootElement()`方法获取根节点。例如：`Element root = document.getRootElement();` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值