JS-JSON-获取JSON对象中的数据展示到表格里

最新推荐文章于 2023-07-16 16:07:19 发布

TSCCG

最新推荐文章于 2023-07-16 16:07:19 发布

阅读量6.6k

点赞数 11

分类专栏： Web前端文章标签： javascript json

本文链接：https://blog.csdn.net/TSCCG/article/details/119538650

版权

Web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

JS-JSON-获取JSON对象中的数据展示到表格里

1.要求

点击按钮，将学生信息展示到表格里，并显示总记录条数。

2.实现思路

创建JSON对象
- 先创建一个JSON对象data，有总人数total和学生信息emps两个属性
- emps是一个JSON数组，里面存放着所有学生的信息。
搭框架
- 将按钮、表格等都先创建好
将JSON对象中的数据放入框架中
1. 获取按钮对象，将click事件注册上去
2. 获取JSON对象中的emps属性，也就是存储所有学生信息的JSON数组
3. 定义一个变量，遍历emps数组，将所有记录都以表格的格式拼接到这个变量里
4. 将变量的值赋给tbody的innerHTML属性
5. 将total的值放进显示总记录数的span标签

3.实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将JSON对象中的数据展示到表格里</title>
</head>
<body>
    <script type="text/javascript">
        //JSON对象，存储着员工数据
        var data = {
            "total":6,
            "emps":[
                {"empno":"001","ename":"张三","sal":800.0},
                {"empno":"002","ename":"李四","sal":1800.0},
                {"empno":"003","ename":"王五","sal":2800.0},
                {"empno":"004","ename":"王六","sal":3800.0},
                {"empno":"005","ename":"王七","sal":4800.0},
                {"empno":"006","ename":"王八","sal":5800.0}
            ]
        };
        window.onload = function() {
            //获取按钮对象
            var displayBtnElt =  document.getElementById("displayBtn");
            displayBtnElt.onclick = function() {
                //获取JSON对象中的存储着员工数据的emps属性
                var emps = data.emps;
                //通过for循环，将所有员工的信息都拼接到一个字符串里
                //定义一个变量，用于存储拼接的字符串
                var htmlStr = "";
                for(var i = 0;i < emps.length;i++) {
                    //获取一条员工信息
                    var emp = emps[i];
                    /*
                    <tr>
                        <td>001</td>
                        <td>张三</td>
                        <td>800.0</td>
                    </tr>
                    */
                    htmlStr += "<tr>";
                    htmlStr += "<td>" + emp.empno + "</td>";
                    htmlStr += "<td>" + emp.ename + "</td>";
                    htmlStr += "<td>" + emp.sal + "</td>";
                    htmlStr += "</tr>";
                }
                //将拼接的字符串放进tbody里
                document.getElementById("tBody").innerHTML = htmlStr;
                //将总人数放进末尾的span标签内
                document.getElementById("count").innerText = data.total;
            }
        }
    </script>
    <table border="1" width="50%" cellspacing="0" cellpadding="0">
        <input type="button" value="点击显示数据" id="displayBtn">
        <h3>员工信息表</h3>
        <hr>
        <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工薪资</th>
            </tr>
        </thead>
        <tbody id="tBody" align="center"></tbody>
    </table>
    总记录条数：<span id="count">0</span>
</body>
</html>

TSCCG

关注

11
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS-JSON-获取JSON对象中的数据展示到表格里

JS-JSON-获取JSON对象中的数据展示到表格里1.要求点击按钮，将学生信息展示到表格里，并显示总记录条数。2.实现思路创建JSON对象先创建一个JSON对象data，有总人数total和学生信息emps两个属性emps是一个JSON数组，里面存放着所有学生的信息。搭框架将按钮、表格等都先创建好将JSON对象中的数据放入框架中获取按钮对象，将click事件注册上去获取JSON对象中的emps属性，也就是存储所有学生信息的JSON数组定义一个变量，遍历emps数组
复制链接

扫一扫