使用javascript[duplicate]从jsondata.json文件填充html表

Question

我是javascript和jQuery新手。我已经加载了jsondata.json文件。我需要帮助循环通过所有的数据，并显示在一个HTML表中，当用户单击一个按钮。

<script>
    var a = {};
    $.getJSON('JsonData.json', function (data) {
        a = data;
    });
</script>

我的表结构如下：

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>IDNumber</th>
    </tr>
</table>

我的“jsondata.json”文件结构如下：

[
    {
        "ID": 1,
        "Name": "John Smith",
        "IDNumber": "7606015012088"
    },
    {
        "ID": 2,
        "Name": "Molly Malone",
        "IDNumber": "8606125033087"
    },
    {
        "ID": 3,
        "Name": "Rianna Chetty",
        "IDNumber": "6207145122087"
    },
    {
        "ID": 4,
        "Name": "Gregory Nazul",
        "IDNumber": "8112125042088"
    },
    {
        "ID": 5,
        "Name": "Mary Billat",
        "IDNumber": "9103317012087"
    },
    {
        "ID": 6,
        "Name": "Harry Popadopalous",
        "IDNumber": "7206085031088"
    },
    {
        "ID": 7,
        "Name": "Jim Beam",
        "IDNumber": "5101236012088"
    }
]

Answer 1

您可以使用以下内容：

     <script>
            var a = {};
            $.getJSON('JsonData.json', function (data) {
                a = data;

    $.each(a, function(idx, elem){
    $('table#tbl TBODY').append('<tr><td>'+elem.ID+'</td><td>'+elem.Name +'</td><td>'+elem.IDNumber +'</td></tr>');
    });
                });

         </script>

<table id="tbl">
<thead><tr><th>ID</th><th>Name</th><th>IDNumber</th></tr></thead>
<tbody></tbody>
</table>