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

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

或文档顶部执行，此时 和

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

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

最稳妥的方式是将 <script> 标签移至 闭合标签之前（即页面底部），确保所有 HTML 元素已加载完成。同时，推荐采用<strong>内联事件绑定 + 函数封装的方式提升可维护性与兼容性，如下所示：</script>

<!-- 放在 </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>

并在表格

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

中添加 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>'
           . '';
    }
  ?>
</tbody>

⚠️ 关键注意事项：使用 .innerHTML（而非 .innerText）可保留单元格内可能存在的格式化内容（如 、换行等），但需确保后端数据已做 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> 位置，更符合现代实践，且便于后续扩展（如动态追加行后重新绑定）。</script>

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