jquery把json转换为表格

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。将 JSON 数据转换为表格是 jQuery 中常见的操作之一。

基础概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON 基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 的一个子集。

类型与应用场景

类型：JSON 数据通常以键值对的形式存在，可以是对象或数组。
应用场景：数据交换、配置文件、前端和后端之间的数据传输等。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 将 JSON 数据转换为 HTML 表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON to Table</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="table-container"></div>

    <script>
        $(document).ready(function() {
            var jsonData = [
                { "name": "John", "age": 30, "city": "New York" },
                { "name": "Anna", "age": 22, "city": "London" },
                { "name": "Peter", "age": 32, "city": "Paris" }
            ];

            function buildTable(data) {
                var table = $('<table></table>');
                var header = $('<tr></tr>');

                // 创建表头
                $.each(data[0], function(key, value) {
                    header.append($('<th></th>').text(key));
                });
                table.append(header);

                // 创建表格行
                $.each(data, function(index, item) {
                    var row = $('<tr></tr>');
                    $.each(item, function(key, value) {
                        row.append($('<td></td>').text(value));
                    });
                    table.append(row);
                });

                return table;
            }

            $('#table-container').append(buildTable(jsonData));
        });
    </script>
</body>
</html>