本文介绍如何使用原生 javascript 实现：当用户点击 html 表格某一行时，自动打开一个模态框，并将该行各单元格内容（支持含 html 标签的文本）准确填入模态框内的只读输入框中。
要实现“点击表格行弹出预填充模态框”的功能，关键在于执行时机与DOM 访问方式两个核心问题。原始代码中，JavaScript 在
或 顶部立即执行，此时表格 DOM 尚未渲染完成（尤其是 PHP 动态生成的内容），导致 document.querySelectorAll("table tbody tr") 返回空集合，事件监听器无法绑定——这是最常见的失败原因。✅ 正确做法：延迟执行 + 行内触发
推荐采用 “HTML 驱动 + 函数式绑定” 方案，即：
- 将
- 不依赖 querySelectorAll 批量绑定，而是为每行
添加 onclick="openModal(this)"，直接传入当前行 DOM 节点； - 使用 row.cells[i].innerHTML（而非 innerText）以保留原始格式（如链接、加粗等），避免纯文本丢失结构。
以下是完整、可直接运行的优化代码示例：
Table Row Modal Demo Column1 Column2 Column3 "; echo " "; } ?>{$row[0]} {$row[1]} {$row[2]} "; echo "⚠️ 注意事项与最佳实践
- innerHTML vs innerText：若单元格含 HTML（如 、），务必用 innerHTML；若仅需纯文本，可用 textContent（更安全，防 XSS）。
- PHP 输出安全：若列值来自不可信来源，服务端需对输出做 htmlspecialchars() 过滤，避免 XSS 漏洞。
- 响应式适配：.modal-content 宽度设为 max-width 并配合 width: 90%，确保在移动设备上良好显示。
-
无障碍支持：可为
添加 role="button" 和 tabindex="0"，并补充键盘事件（Enter/Space 触发），提升可访问性。 通过以上结构化实现，你无需引入任何框架即可获得稳定、语义清晰、易于维护的行级模态交互体验。
