如何用JavaScript从JSON数据动态生成带动态表头的HTML表格？

以下是基于给定JSON数据生成动态表头表格的代码，会自动提取所有字段作为表头，无对应值的单元格留空：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态表头表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="table-container"></div>

    <script>
        // 给定的JSON数据
        const jsonData = [
            {
                "name":"value1",
                "email":"user1@gmail.com"
            },
            {
                "id":"123",
                "name":"value2"
            },
            {
                "name":"value3",
                "email":"user3@gmail.com",
                "messsage":"lorem ipsum"
            },
            {
                "name":"value4",
                "email":"user4@gmail.com"
            }
        ];

        // 提取所有唯一字段作为表头
        const allFields = [...new Set(jsonData.flatMap(item => Object.keys(item)))];

        // 创建表格元素
        const table = document.createElement('table');
        
        // 生成表头行
        const headerRow = document.createElement('tr');
        allFields.forEach(field => {
            const th = document.createElement('th');
            th.textContent = field;
            headerRow.appendChild(th);
        });
        table.appendChild(headerRow);

        // 生成数据行
        jsonData.forEach(item => {
            const row = document.createElement('tr');
            allFields.forEach(field => {
                const td = document.createElement('td');
                td.textContent = item[field] || '';
                row.appendChild(td);
            });
            table.appendChild(row);
        });

        // 将表格添加到页面容器
        document.getElementById('table-container').appendChild(table);
    </script>
</body>
</html>

代码说明 #

• 自动提取JSON中所有出现过的字段作为表头，无需提前指定
• 遍历每条数据，根据表头字段匹配对应值，无值则单元格留空
• 附带基础样式，表格边框合并、表头灰色背景，可根据需求调整

内容的提问来源于stack exchange，提问作者Uday kiran