如何通过JavaScript将表格点击行的字段值传入模态框？

1. 调整PHP表格生成代码 #

在生成表格第一列的<a>标签时，把当前行的所有字段数据转成JSON格式，存入自定义data-row属性中，让前端JS能直接读取整行数据：

<?php
// 遍历查询结果集$viewTablo
while ($row = odbc_fetch_array($viewTablo)) {
    echo "<tr>";
    $i = 1;
    foreach ($row as $key => $value) {
        if ($i == 1) {
            // 转义JSON避免HTML字符冲突，确保属性值合法
            $rowJson = htmlspecialchars(json_encode($row), ENT_QUOTES);
            echo "<td><a href='#' class='row-link' data-row='{$rowJson}'>{$value}</a></td>";
        } else {
            echo "<td>{$value}</td>";
        }
        $i++;
    }
    echo "</tr>";
}
?>

2. 准备模态框HTML结构 #

确保页面存在#exampleModal模态框，预留动态填充内容的容器：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">行详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="modal-content"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

3. JavaScript实现点击填充逻辑 #

监听<a>标签的点击事件，解析行数据并填充到模态框，最后显示模态框：

// 给所有行链接绑定点击事件
document.querySelectorAll('.row-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        // 解析data-row中的JSON数据
        const rowData = JSON.parse(this.dataset.row);
        const modalContent = document.getElementById('modal-content');
        // 清空模态框原有内容
        modalContent.innerHTML = '';
        // 遍历字段生成显示内容
        for (const [fieldName, fieldValue] of Object.entries(rowData)) {
            const fieldItem = document.createElement('div');
            fieldItem.innerHTML = `<strong>${fieldName}:</strong> ${fieldValue}`;
            modalContent.appendChild(fieldItem);
        }
        // 显示Bootstrap模态框（非Bootstrap环境替换为自己的模态框显示逻辑）
        const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
        modal.show();
    });
});

内容的提问来源于stack exchange，提问作者wittream