本文介绍在纯 html + php 环境中，不依赖 bootstrap 或框架的前提下，实现点击表格任意一行后自动弹出模态框，并将该行各列文本值准确填入对应输入框的完整解决方案。

要让点击表格行触发模态框并正确填充数据，关键在于执行时机与DOM 访问方式两个核心问题。

❗ 常见错误分析

原代码中 JavaScript 脚本位于 标签顶部（即

之前），此时 和 尚未被浏览器解析，document.querySelectorAll("table tbody tr") 返回空 NodeList，导致事件监听器根本未绑定——这是最典型的“脚本执行过早”问题。

此外，使用 innerText 可能因 HTML 标签嵌套（如

）导致取值为空或截断；改用 innerHTML（配合 readonly 输入框可安全显示纯文本）或更健壮的 textContent 更可靠。

✅ 正确实现方案

将

value

xample.com'], ['Carol', 'Manager', 'carol@example.com'] ]; foreach ($rows as $row) { echo ""; echo ""; echo ""; } ?>

Column1	Column2	Column3
{$row[0]}	{$row[1]}	{$row[2]}

×

Column1:

Column2:

Column3:

? 注意事项与最佳实践

• CSS 初始化建议：初始时给 #myModal 添加 display: none;，避免页面加载瞬间闪现模态框；
• 响应式优化：.modal-content 宽高可设为 max-width: 90vw; max-height: 80vh; overflow-y: auto; 适配移动端；
• 空单元格处理：若某列可能为空，建议添加空值判断：

  const cellText = row.cells[i]?.textContent?.trim() || '';

• 性能考虑：对于超大表格（>1000 行），推荐使用事件委托（监听 ），但当前场景直接绑定更清晰易维护。

  至此，你已拥有一套轻量、可靠、可直接集成到现有 PHP+REST API 项目中的行级模态交互方案。无需额外库，语义清晰，开箱即用。