读取json数据并动态生成table

最新推荐文章于 2025-06-20 22:56:13 发布

原创

最新推荐文章于 2025-06-20 22:56:13 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

这篇博客介绍如何从JSON文件中读取数据，并利用这些数据动态地创建HTML表格，适用于网页数据展示和交互应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件data.text

[{"name":"john","age":12},
{"name":"peter","age":12},
{"name":"marry","age":14},
]

文件test.html

<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script>
        function createTable(url){
            var result = $.ajax({ url: url, async: false}).responseText;
            var rows = eval(result);
            var tableStr = '<table><tr>';
            var object = rows[0];
            for(var i in object)
                tableStr += '<th>' + i + '</th>';
            tableStr += '</tr>';
            for(var i = 0; i < rows.length; i++){
                tableStr += '<tr>';
                for(var columnName in rows[i])
                    tableStr += '<td>' + rows[i][columnName] + '</td>';
                tableStr += '</tr>';