如何实现实时更新JSON数据的无刷新HTML表格展示？

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时数据展示</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  
    <!-- CSS FOR STYLING THE PAGE -->
    <style>
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }
  
        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans', 
                'Gill Sans MT', 'Calibri', 
                'Trebuchet MS', sans-serif;
        }
  
        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }
  
        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
  
        td {
            font-weight: lighter;
        }
    </style>
</head>
  
<body>
    <section>
        <h1>My Google Sheet Table</h1>
  
        <!-- TABLE CONSTRUCTION-->
        <table id='mytable'>
            <!-- HEADING FORMATION -->
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Months</th>
                </tr>
            </thead>
            <tbody id="table-body">
                <!-- 数据行将在这里动态生成 -->
            </tbody>
        </table>
  
        <script>
            $(document).ready(function () {
                // 定义JSON数据链接
                const jsonUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=d35evgnJDv5awIRNN4sL50jrlOPbNOshBaKqt9GqDXkcf-xd6PRR1u_3i9FLFuJSc37Fs_lY-lECa9TZ5wJA-W-eEJ-vVCkZm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnMs1tm11-lp-Q13okfTSX_i5IzvU5JZnhqqg8H90dlfD5jU3SrNArGaMaXSvzMBh2h5A-lJ1RFia7VipeMnCxQqExfB7Qd_-iQ&lib=MVoeqw6DJ9bzix14T3i_S_jbsQ0CRhLAj";

                // 定义渲染表格的函数
                function renderTable(data) {
                    let content = '';
                    // 遍历JSON数据生成行
                    $.each(data, function (key, value) {
                        content += '<tr>';
                        content += '<td>' + value.SN + '</td>';
                        content += '<td>' + value.Name + '</td>';
                        content += '<td>' + value.Phone + '</td>';
                        content += '<td>' + value.Months + '</td>';
                        content += '</tr>';
                    });
                    // 替换tbody内容，而不是追加
                    $('#table-body').html(content);
                }

                // 初始加载数据
                $.getJSON(`${jsonUrl}?_=${Date.now()}`, renderTable);

                // 每秒更新一次数据
                setInterval(function () {
                    // 添加时间戳参数避免浏览器缓存旧数据
                    $.getJSON(`${jsonUrl}?_=${Date.now()}`, renderTable);
                }, 1000);
            });
        </script>
    </section>
</body>
  
</html>

关键修改说明 #

• 解决重复添加行问题：把表格拆分为<thead>和<tbody>，每次更新时用html()替换<tbody>的内容，而非append()追加，避免表格无限增长。
• 避免缓存旧数据：在JSON链接后添加?_=${Date.now()}参数，每次请求的URL携带当前时间戳，强制浏览器获取最新数据。
• 匹配JSON更新频率：将setInterval间隔从3000毫秒改为1000毫秒，对齐JSON每秒更新的频率。
• 代码结构优化：把表格渲染逻辑封装为独立函数renderTable，提升代码可维护性。
• 替换实际链接：将原代码中的占位符JsonDataFileLink替换为你提供的真实JSON URL。

额外注意事项 #

• 如果JSON数据量较大，频繁请求可能影响性能，可适当调整请求间隔（比如1.5秒），或实现增量更新（仅修改变化的数据）。
• 确认跨域权限：当前提供的JSON链接已支持跨域，若后续更换链接需确保接口允许跨域请求。

内容的提问来源于stack exchange，提问作者Ali Khan