如何通过点击表格行动态打开并填充模态框

本文介绍如何使用原生 javascript 实现：点击 html 表格任意一行时，自动弹出模态框，并将该行各单元格内容（支持含 html 标签的文本）准确填充至对应只读输入框中，无需框架依赖。

要实现“点击表格行触发模态框并动态填充数据”，核心在于DOM 加载时机与事件绑定方式的正确配合。原始代码中，JavaScript 在

或文档顶部执行，此时 和 尚未被浏览器解析，导致 document.querySelectorAll("table tbody tr") 返回空集合，事件监听器实际未绑定到任何元素上——这是最常见的失败原因。

✅ 正确做法：确保 DOM 完全就绪后再执行脚本

最稳妥的方式是将

并在表格

中添加 onclick 调用：

' . '' . '' . '' . ''; } ?>

⚠️ 关键注意事项：使用 .innerHTML（而非 .innerText）可保留单元格内可能存在的格式化内容（如 、换行等），但需确保后端数据已做 XSS 过滤；PHP 输出时务必使用 htmlspecialchars() 对敏感字符转义，防止脚本注入；模态框默认应设为 display: none（原始代码中 #myModal { display: block; } 会导致页面加载时短暂闪现），建议在 CSS 中修正：#myModal { display: none; /* 初始隐藏 */ position: fixed; z-index: 1000; ... }

✅ 补充增强（可选）

若需更高健壮性，可改用 DOMContentLoaded 事件替代位置依赖：

这种方式不依赖

综上，成功的关键在于：DOM 就绪 + 合理选择 innerHTML/innerText + 安全的数据输出 + 隐式模态框初始状态控制。三者缺一不可。

' . htmlspecialchars($item['col1']) . '	' . htmlspecialchars($item['col2']) . '	' . htmlspecialchars($item['col3']) . '