以HTML格式显示JSON本地文件中的数据

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
    #data-table {
        border-collapse: collapse;
        width: 100%;
    }

    #data-table th, #data-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    #data-table th {
        background-color: #f2f2f2;
    }
</style>

<table id="data-table">
    <thead>
        <tr>
            <th>属性名</th>
            <th>属性值</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        fetch('data.json')  // 替换为你的本地JSON文件路径
            .then(response => response.json())
            .then(data => {
                Object.keys(data).forEach(key => {
                    var row = $('<tr></tr>');
                    row.append($('<td></td>').text(key));
                    row.append($('<td></td>').text(data[key]));
                    $('#data-table tbody').append(row);
                });
            })
            .catch(error => console.log(error));
    });
</script>