本文详解为何在调用 window.location.reload() 后执行 dom 显示切换会失效，并提供无需整页刷新即可动态切换表格内容的专业解决方案。
你在 showHistorico() 函数中先调用了 window.location.reload()，紧接着才设置 tabPrincipal.style.display = “none” 和 tabHistorico.style.display = “block” —— 这是根本性错误：reload() 会立即中断当前 javaScript 执行流，强制浏览器重新加载整个页面，后续的 DOM 操作根本不会执行，且由于重载后页面从头渲染，若服务端未同步更新对应数据（如 historico 数组），前端仍可能因变量未就绪而呈现空白或异常。
更关键的是，你提到“需要页面重载，因为仅更新数组不生效”，这说明问题本质不在 DOM 切换，而在服务端数据未及时注入到客户端上下文。你的 PHP 模板语法 for(…) { ?>…= historico[i][j] ?>… } ?> 是服务端渲染（SSR），它只在页面首次生成时执行；javascript 无法直接修改 php 变量，因此单纯在 js 中修改 historico 数组并不会触发 html 重渲染。
✅ 正确解法是：避免 reload，改用纯前端动态渲染。前提是将服务端数据以 json 形式预加载到页面中：
然后编写可复用的渲染函数：
const tabPrincipal = document.getElementById('tabPrincipal'); const tabHistorico = document.getElementById('tabHistorico'); function renderTable(targetTable, data, tableName = 'vistorias') { targetTable.innerHTML = ''; // 清空旧内容 data.forEach((row, i) => { const tr = document.createElement('tr'); tr.innerHTML = ` SELECIONE PRA IMPRIMIR ${row.map(cell => `${escapeHtml(cell)} `).join('')} `; targettable.appendChild(tr); }); } // 安全转义 HTML 防 XSS function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(//g, "youjiankuohaophpcn") .replace(/"/g, """) .replace(/'/g, "'"); } function showHistorico() { renderTable(tabHistorico, historico, 'historico'); tabPrincipal.style.display = 'none'; tabHistorico.style.display = 'table'; // 注意：table 元素应设为 'table' 而非 'block' } function showPrincipal() { renderTable(tabPrincipal, vistorias, 'vistorias'); tabHistorico.style.display = 'none'; tabPrincipal.style.display = 'table'; }HTML 中按钮改为：
⚠️ 注意事项：
- 永远不要在 reload() 后写 JS 逻辑：它等同于 return，后续代码永不执行；
- display 值需匹配元素类型：
应用 ‘table’，