本文详解为何在调用 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 形式预加载到页面中：
<!-- 在 HTML 底部或 <head> 中注入数据 --> <script> // 假设 PHP 已将数据转为 JSON const vistorias = <?= json_encode($vistorias, JSON_HEX_TAG | JSON_HEX_AMP) ?>; const historico = <?= json_encode($historico, JSON_HEX_TAG | JSON_HEX_AMP) ?>; </script>
然后编写可复用的渲染函数：
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 = `
<td>
<i class="bi bi-printer-fill iconPrint">
<span id="spanPrint">SELECIONE PRA IMPRIMIR</span>
</i>
</td>
${row.map(cell => `<th>${escapeHtml(cell)}</th>`).join('')}
`;
targetTable.appendChild(tr);
});
}
// 安全转义 HTML 防 XSS
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.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 中按钮改为：
<button class="btn btn-sm btn-primary btn-block" onclick="showHistorico()">HISTÓRICO</button> <button class="btn btn-sm btn-secondary btn-block" onclick="showPrincipal()">PRINCIPAL</button> <table class="table table-dark table-hover" id="tabPrincipal"></table> <table class="table table-dark table-hover" id="tabHistorico" style="display:none"></table>
⚠️ 注意事项：
- 永远不要在 reload() 后写 JS 逻辑：它等同于 return，后续代码永不执行；
- display 值需匹配元素类型：<table> 应用 'table'，<div> 才用 'block'；
- 使用 json_encode() 输出 PHP 数组到 JS，确保数据结构完整、安全；
- 动态渲染时务必清空目标容器（innerHTML = ''），避免重复追加；
- 如需保留原有表格结构（如表头），可分离 <thead> 与 <tbody>，仅替换 tbody 内容。
此方案彻底规避了整页刷新，响应更快、用户体验更流畅，且完全可控——这才是现代 Web 开发中切换视图的推荐实践。
