本文介绍如何使用原生 javascript 实现：点击 html 表格任意一行时，自动弹出模态框，并将该行各单元格内容（支持含 html 标签的文本）准确填充至对应只读输入框中，无需框架依赖。
要实现“点击表格行触发模态框并动态填充数据”，核心在于DOM 加载时机与事件绑定方式的正确配合。原始代码中，JavaScript 在 zuojiankuohaophpcnhead> 或文档顶部执行，此时 <table> 和 <div id="myModal"> 尚未被浏览器解析，导致 document.querySelectorAll("table tbody tr") 返回空集合，事件监听器实际未绑定到任何元素上——这是最常见的失败原因。
✅ 正确做法：确保 DOM 完全就绪后再执行脚本
最稳妥的方式是将 <script> 标签移至 </body> 闭合标签之前（即页面底部），确保所有 HTML 元素已加载完成。同时，推荐采用内联事件绑定 + 函数封装的方式提升可维护性与兼容性，如下所示：
<!-- 放在 </body> 标签前 -->
<script>
const modal = document.getElementById("myModal");
const closeBtn = document.getElementById("close");
// 点击行时打开模态框并填充数据
function openModal(row) {
modal.style.display = "block";
document.getElementById("modal-column1").value = row.cells[0].innerHTML;
document.getElementById("modal-column2").value = row.cells[1].innerHTML;
document.getElementById("modal-column3").value = row.cells[2].innerHTML;
}
// 点击 × 关闭模态框
closeBtn.onclick = function() {
modal.style.display = "none";
};
// 点击模态框背景（非内容区）也关闭
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
</script>并在表格 <tr> 中添加 onclick 调用：
<tbody>
<?php
// 示例：PHP 循环输出 API 数据（此处保持原有逻辑）
foreach($apiData as $item) {
echo '<tr onclick="openModal(this)">'
. '<td>' . htmlspecialchars($item['col1']) . '</td>'
. '<td>' . htmlspecialchars($item['col2']) . '</td>'
. '<td>' . htmlspecialchars($item['col3']) . '</td>'
. '</tr>';
}
?>
</tbody>⚠️ 关键注意事项：使用 .innerHTML（而非 .innerText）可保留单元格内可能存在的格式化内容（如 <strong>、换行等），但需确保后端数据已做 XSS 过滤；PHP 输出时务必使用 htmlspecialchars() 对敏感字符转义，防止脚本注入；模态框默认应设为 display: none（原始代码中 #myModal { display: block; } 会导致页面加载时短暂闪现），建议在 CSS 中修正：#myModal { display: none; /* 初始隐藏 */ position: fixed; z-index: 1000; ... }
✅ 补充增强（可选）
若需更高健壮性，可改用 DOMContentLoaded 事件替代位置依赖：
<script>
document.addEventListener('DOMContentLoaded', function() {
const rows = document.querySelectorAll('table tbody tr');
rows.forEach(row => {
row.addEventListener('click', function() {
openModal(this);
});
});
// 其余 close 逻辑同上...
});
</script>这种方式不依赖 <script> 位置，更符合现代实践，且便于后续扩展（如动态追加行后重新绑定）。
综上，成功的关键在于：DOM 就绪 + 合理选择 innerHTML/innerText + 安全的数据输出 + 隐式模态框初始状态控制。三者缺一不可。
