H5工具代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态 JSON 数据表格</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-top: 20px;
        }
        button {
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h2>动态 JSON 数据表格</h2>
<textarea id="json-input" placeholder='请输入 JSON 数据'></textarea>
<button id="generate-table">生成表格</button>

<table id="data-table">
    <thead>
    <tr id="table-header">
        <!-- 表头将通过 JavaScript 动态生成 -->
    </tr>
    </thead>
    <tbody id="table-body">
    <!-- 数据行将通过 JavaScript 动态生成 -->
    </tbody>
</table>

<script>
    document.getElementById('generate-table').addEventListener('click', function() {
        const jsonInput = document.getElementById('json-input').value;
        let jsonData;

        // 清空表格
        document.getElementById('table-header').innerHTML = '';
        document.getElementById('table-body').innerHTML = '';

        try {
            jsonData = JSON.parse(jsonInput);
        } catch (e) {
            alert('无效的 JSON 数据');
            return;
        }

        if (jsonData.code !== 0 || !Array.isArray(jsonData.data)) {
            alert('无效的 JSON 格式');
            return;
        }

        // 动态生成表头
        const headers = Object.keys(jsonData.data[0]);
        headers.forEach(header => {
            const th = document.createElement('th');
            th.textContent = header;
            document.getElementById('table-header').appendChild(th);
        });

        // 动态生成表体
        jsonData.data.forEach(item => {
            const row = document.createElement('tr');
            headers.forEach(header => {
                const cell = document.createElement('td');
                cell.textContent = item[header];
                row.appendChild(cell);
            });
            document.getElementById('table-body').appendChild(row);
        });
    });
</script>

</body>
</html>

案例如下：

动态 JSON 数据表格

动态 JSON 数据表格

json 如下

{
  "code": 0,
  "data": [
    {
      "表名": "SYS_BIZ",
      "表中文名": "系统业务表"
    },
    {
      "表名": "SYS_USER",
      "表中文名": "系统用户表"
    },
    {
      "表名": "SYS_ACCOUNT",
      "表中文名": "系统账号表"
    }
  ],
  "msg": ""
}
特殊说明：
上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取最新全部资料 ❤

免责声明：
本站文章旨在总结学习互联网技术过程中的经验与见解。任何人不得将其用于违法或违规活动！所有违规内容均由个人自行承担，与作者无关。