本文介绍在纯 html + php 环境中，不依赖 bootstrap 或框架的前提下，实现点击表格任意一行后自动弹出模态框，并将该行各列文本值准确填入对应输入框的完整解决方案。
要让点击表格行触发模态框并正确填充数据，关键在于执行时机与DOM 访问方式两个核心问题。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
❗ 常见错误分析
原代码中 JavaScript 脚本位于 标签顶部（即
之前），此时
和 尚未被浏览器解析，document.querySelectorAll("table tbody tr") 返回空 NodeList，导致事件监听器根本未绑定——这是最典型的“脚本执行过早”问题。
此外，使用 innerText 可能因 HTML 标签嵌套（如
value | ）导致取值为空或截断；改用 innerHTML（配合 readonly 输入框可安全显示纯文本）或更健壮的 textContent 更可靠。
✅ 正确实现方案
将 <script> 移至 闭合标签<strong>之前，确保 DOM 已完全加载：</script>
<!-- 表格与模态框 HTML 结构（保持不变） -->
<table>
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
</thead>
<tbody>
<?php
// 示例：PHP 动态生成行（实际为 REST API 数据）
$rows = [
['Alice', 'Engineer', 'alice@example.com'],
['Bob', 'Designer', 'bob@example.com'],
['Carol', 'Manager', 'carol@example.com']
];
foreach ($rows as $row) {
echo "<tr>";
echo "<td>{$row[0]}</td><td>{$row[1]}</td><td>{$row[2]}</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><label>Column1:</label><input type="text" id="modal-column1" readonly></p>
<p><label>Column2:</label><input type="text" id="modal-column2" readonly></p>
<p><label>Column3:</label><input type="text" id="modal-column3" readonly></p>
</div>
</div>
<!-- ✅ 关键：JS 必须放在 body 底部 -->
<script>
const modal = document.getElementById("myModal");
const closeBtn = document.querySelector(".close"); // 推荐用 class 选择更灵活
const rows = document.querySelectorAll("table tbody tr");
// 为每行绑定点击事件
rows.forEach(row => {
row.addEventListener("click", () => {
// 使用 textContent 更安全（忽略 HTML 标签，仅取纯文本）
document.getElementById("modal-column1").value = row.cells[0].textContent;
document.getElementById("modal-column2").value = row.cells[1].textContent;
document.getElementById("modal-column3").value = row.cells[2].textContent;
modal.style.display = "block";
});
});
// 关闭按钮点击事件
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
});
// 点击模态框背景区域关闭（增强用户体验）
window.addEventListener("click", (e) => {
if (e.target === modal) {
modal.style.display = "none";
}
});
// ✨ 可选：按 Esc 键关闭模态框
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.style.display === "block") {
modal.style.display = "none";
}
});
</script>? 注意事项与最佳实践
