本文介绍如何使用原生 javascript 实现：当用户点击 html 表格某一行时，自动打开一个模态框，并将该行各单元格内容（支持含 html 标签的文本）准确填入模态框内的只读输入框中。
要实现“点击表格行弹出预填充模态框”的功能，关键在于执行时机与DOM 访问方式两个核心问题。原始代码中，JavaScript 在 <head> 或 <body> 顶部立即执行，此时表格 DOM 尚未渲染完成（尤其是 PHP 动态生成的内容），导致 document.querySelectorAll("table tbody tr") 返回空集合，事件监听器无法绑定——这是最常见的失败原因。
✅ 正确做法：延迟执行 + 行内触发
推荐采用 “HTML 驱动 + 函数式绑定” 方案，即：
- 将 <script> 放置在 </body> 闭合标签之前（确保 DOM 已就绪）；
- 不依赖 querySelectorAll 批量绑定，而是为每行 <tr> 添加 onclick="openModal(this)"，直接传入当前行 DOM 节点；
- 使用 row.cells[i].innerHTML（而非 innerText）以保留原始格式（如链接、加粗等），避免纯文本丢失结构。
以下是完整、可直接运行的优化代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Row Modal Demo</title>
<style>
#myModal {
display: none; /* 初始隐藏 */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 24px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
position: relative;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.close:hover {
color: #333;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
</style>
</head>
<body>
<table border="1" style="width:100%; margin-bottom: 20px;">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
<!-- PHP 示例：实际中由 API 数据动态生成 -->
<?php
// 模拟 API 返回的数组（生产环境替换为真实 $data）
$rows = [
['<strong>ID-001</strong>', 'Alice', '<a href="#">View Profile</a>'],
['ID-002', 'Bob', 'Edit'],
['ID-003', 'Charlie', '<span style="color:green">Active</span>']
];
foreach ($rows as $row) {
echo "<tr onclick=\"openModal(this)\">";
echo "<td>{$row[0]}</td><td>{$row[1]}</td><td>{$row[2]}</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<!-- 模态框 -->
<div id="myModal">
<div class="modal-content">
<span class="close">×</span>
<h3>Row Details</h3>
<p>
<label for="modal-column1">Column1:</label>
<input type="text" id="modal-column1" readonly>
</p>
<p>
<label for="modal-column2">Column2:</label>
<input type="text" id="modal-column2" readonly>
</p>
<p>
<label for="modal-column3">Column3:</label>
<input type="text" id="modal-column3" readonly>
</p>
</div>
</div>
<script>
const modal = document.getElementById("myModal");
const closeBtn = document.querySelector(".close");
function openModal(row) {
// 填充值（使用 innerHTML 保留原始 HTML 内容）
document.getElementById("modal-column1").value = row.cells[0].innerHTML.trim();
document.getElementById("modal-column2").value = row.cells[1].innerHTML.trim();
document.getElementById("modal-column3").value = row.cells[2].innerHTML.trim();
modal.style.display = "block";
}
// 关闭按钮
closeBtn.onclick = () => {
modal.style.display = "none";
};
// 点击模态框背景关闭
window.onclick = (event) => {
if (event.target === modal) {
modal.style.display = "none";
}
};
// 可选：ESC 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.style.display === 'block') {
modal.style.display = 'none';
}
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- innerHTML vs innerText：若单元格含 HTML（如 <strong>、<a>），务必用 innerHTML；若仅需纯文本，可用 textContent（更安全，防 XSS）。
- PHP 输出安全：若列值来自不可信来源，服务端需对输出做 htmlspecialchars() 过滤，避免 XSS 漏洞。
- 响应式适配：.modal-content 宽度设为 max-width 并配合 width: 90%，确保在移动设备上良好显示。
- 无障碍支持：可为 <tr> 添加 role="button" 和 tabindex="0"，并补充键盘事件（Enter/Space 触发），提升可访问性。
通过以上结构化实现，你无需引入任何框架即可获得稳定、语义清晰、易于维护的行级模态交互体验。
