如何实现读取JSON文件自动更新HTML表格数据？

你的核心问题是当前代码用PHP一次性渲染表格，无法在前端动态更新数据。下面是修改后的完整代码，实现每5秒自动拉取最新JSON并更新表格，同时保留TableFilter的筛选功能：

<html>
<head>
<title>DATOS</title>
<script type="text/javascript" src="inc/js/tablefilter_all_min.js"></script>
<link rel="stylesheet" type="text/css" href="css/filtergrid.css"> <!-- 修正原代码type属性错误 -->
</head> <!-- 修正原代码重复的head标签 -->
<body>
<table id="table" class="TF" cellpadding="0" cellspacing="0" border="1">
<thead>
    <tr>
        <th>ID</th>
        <th>VDN</th>
        <th>VDN</th>
        <th>INPROGRESS-ATAGENT</th>
        <th>OLDESTCALL</th>
        <th>AVG_ANSWER_SPEED</th>
        <th>ABNCALLS</th>
        <th>AVG_ABANDON_TIME</th>
        <th>ACDCALLS</th>
        <th>AVG_ACD_TALK_TIME</th>
        <th>ACTIVECALLS</th>
    </tr>
</thead>
<tbody id="table-body">
<!-- 表格内容由JS动态生成 -->
</tbody>
</table>

<script>
let tf2; // 全局变量保存TableFilter实例

// 初始化表格过滤器
function initTableFilter() {
    const table2_Props = {
        col_0: "select",
        col_1: "select",
        col_2: "select",
        col_3: "select",
        col_4: "select",
        col_5: "select",
        col_6: "select",
        col_7: "select",
        col_8: "select",
        col_9: "select",
        col_10: "select",
        display_all_text: " [ Mostrar Todo ] ",
        sort_select: true
    };
    tf2 = setFilterGrid("table", table2_Props);
}

// 更新表格数据的核心函数
async function updateTable() {
    try {
        // 拉取最新JSON数据
        const response = await fetch('report/vdn.json');
        const jsonData = await response.json();

        const tableBody = document.getElementById('table-body');
        tableBody.innerHTML = ''; // 清空旧数据

        // 遍历JSON生成表格行（兼容原代码的字符串分割逻辑）
        jsonData.forEach(row => {
            const tr = document.createElement('tr');
            const parts = row.split(',');
            parts.forEach(part => {
                const aux = part.split(':"');
                if (aux.length > 1) {
                    const aux3 = aux[1].replace(/"/g, '');
                    const td = document.createElement('td');
                    td.innerHTML = `<center>${aux3}</center>`;
                    tr.appendChild(td);
                }
            });
            tableBody.appendChild(tr);
        });

        // 刷新TableFilter，确保筛选功能正常
        if (tf2) {
            tf2.refresh();
        }
    } catch (error) {
        console.error('更新表格失败:', error);
    }
}

// 页面加载完成后初始化
window.onload = function() {
    initTableFilter();
    updateTable(); // 首次加载数据
    // 设置5秒定时更新
    setInterval(updateTable, 5000);
};
</script>
</body>
</html>

关键修改说明： #

• 修复原代码的语法错误：重复的<head>标签、CSS类型属性写错的问题
• 将PHP渲染表格的逻辑迁移到前端JS，通过fetch异步拉取最新JSON数据
• 新增updateTable函数，负责数据请求、表格内容更新和筛选器刷新
• 使用setInterval实现每5秒自动更新
• 用全局变量保存TableFilter实例，确保表格更新后筛选功能正常

额外优化建议： #

原代码用字符串分割处理JSON的方式非常脆弱，建议将vdn.json调整为标准JSON格式，比如：

[
    {"id":"1", "vdn":"客服专线", "inprogress-atagent":"2", ...},
    {"id":"2", "vdn":"售后专线", "inprogress-atagent":"0", ...}
]

这样JS中可以直接通过row.id、row.vdn取值，代码稳定性会大幅提升。

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