javascript - 将 JSON 数据添加到 Html 表

标签 javascript html json

我有一个 json 数据,我有一个 html 表,我想将 json 数据添加到表中 这就是我尝试获取 json 数据的方式,我使用追加来添加表数据,因为我是 json 解析的新手,我尽了最大努力,任何人都可以帮忙...

我有一个 json 数据,我有一个 html 表,我想将 json 数据添加到表中 这就是我尝试获取 json 数据的方式,我使用追加来添加表数据,因为我是 json 解析的新手,我尽了最大努力,任何人都可以帮忙...

<!DOCTYPE html>
<html>

<head>
    <title>JSON Demo</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function StudentDetails() {
            var stu = [{
                    "stuname": "anbu",
                    "studep": "cs"
                },
                {
                    "stuname": "raj",
                    "studep": "Maths"
                },
                {
                    "stuname": "mani",
                    "studep": "science"
                }
            ]

            var tr = "";
            for (var i = 0; i < stu.length; i++) {

                tr = $('<tr/>');
                tr.append("<td>" + stu.stuname + "</td>");
                tr.append("<td>" + stu.studep + "</td>");
                $('#student').append(tr);

            }
        }
    </script>
</head>

<body>
    <input type="button" onClick="StudentDetails()" value="Student Table" />
    <div>
        <table id="student">
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Student Department</th>
                </tr>
                <thead>
                    <tbody></tbody>
        </table>
    </div>

    <div id="showData"></div>
</body>

</html>

最佳答案

将Array的索引添加到stu中

tr.append("<td>" + stu[i].stuname + "</td>");
tr.append("<td>" + stu[i].studep + "</td>");

关于javascript - 将 JSON 数据添加到 Html 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50870069/

相关文章:

javascript - 使用 JavaScript 进行缓存

javascript - Highcharts 如何显示某些工具提示而不显示其他工具提示

填写电子邮件客户端的 Html 表单?

java - 重构大型 JSON 多次调用

javascript - YUI 编辑器 (RTE) : Insert HTML element and place cursor inside

javascript - GraphQL 返回两种可选类型

javascript - AJAX 调用后按钮尺寸缩小

php - 为什么我的站点在 xampp 中运行但不在我的 Apache 服务器中运行,而我在 Ubuntu 上设置的 mySQL?

javascript - 在 Node.JS 中使用 JSON 文件作为数组

javascript - 使用 React.js 更新 JSON 数组