使用 JavaScript 将 JSON 数据动态转换为 HTML 表

最新推荐文章于 2024-03-15 09:35:06 发布

allway2

最新推荐文章于 2024-03-15 09:35:06 发布

阅读量2.6k

点赞数 3

文章标签： javascript json jquery

本文链接：https://blog.csdn.net/allway2/article/details/122700693

版权

如您所知， JSON 或 JavaScript Object Notation是一种简单易懂的数据格式。JSON 是轻量级且独立于语言的，这就是它通常与jQuery Ajax 一起用于传输数据的原因。在本文中，我将向您展示如何使用 JavaScript将 JSON 数据动态转换为 HTML 表格。此外，您将了解如何使用createElement() 方法在 JavaScript 中动态创建表。

注意：您还可以使用 jQuery 将数据从 JSON 文件转换为 HTML 表，并且使用此过程，您可以使用 jQuery 或 JavaScript创建简单的 CRUD 应用程序。

此示例的 JSON 如下所示。

[
    {
        "Book ID": "1",
        "Book Name": "Computer Architecture",
        "Category": "Computers",
        "Price": "125.60"
    },
    {
        "Book ID": "2",
        "Book Name": "Asp.Net 4 Blue Book",
        "Category": "Programming",
        "Price": "56.00"
    },
    {
        "Book ID": "3",
        "Book Name": "Popular Science",
        "Category": "Science",
        "Price": "210.40"
    }
]

上面的 JSON 有一个包含三个不同书籍的数组，它们的 ID、名称、所属的类别和价格。我的演示只有三个记录。您可以添加更多。我希望读取 JavaScript 中的 JSON 数据，获取 <table> 标题的列（书籍 ID、书籍名称等）以及相应标题的值。检查下面的图像。

标记

在标记部分，我有一个输入类型按钮来调用 JavaScript 函数，该函数将提取 JSON 数据，动态创建带有标题和行的 <table>，最后在其中填充数据。我还有 DIV 元素，它将作为我们表格的容器。填充数据后，我会将<table>附加到 <div>。

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <p id="showData"></p>
</body>

<script>
    function CreateTableFromJSON() {
        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>
</html>

我提到的 JSON 数据存储在一个名为myBooks的数组中。结构非常简单，您可以向其中添加更多数据。

allway2

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
使用 JavaScript 将 JSON 数据动态转换为 HTML 表

如您所知， JSON 或 JavaScript Object Notation是一种简单易懂的数据格式。JSON 是轻量级且独立于语言的，这就是它通常与jQuery Ajax 一起用于传输数据的原因。在本文中，我将向您展示如何使用 JavaScript将 JSON 数据动态转换为 HTML 表格。此外，您将了解如何使用createElement() 方法在 JavaScript 中动态创建表。注意：您还可以使用 jQuery 将数据从 JSON 文件转换为 HTML 表，并且使用此过程，您..
复制链接

扫一扫