如何将表格选中行的数据传入Popup弹窗进行处理？

问题根源 #

当前弹窗中的<?php echo $row["Titel"] ?>是循环外单独查询的最后一条数据，点击表格行时没有将当前行的ID、标题等数据传递到弹窗，导致弹窗内容无法对应选中行。

具体修改方案 #

1. 修改表格行的点击事件，传递当前行数据 #

在循环渲染表格行时，给onclick事件传入当前行的ID和标题，同时用htmlspecialchars转义特殊字符避免JS语法错误：

<tr onclick="dialogOeffnen('loslegen-dialog', '<?php echo $row["ID"] ?>', '<?php echo htmlspecialchars($row["Titel"]) ?>')">

2. 更新弹窗的JS函数，动态修改内容 #

修改dialoge.js中的dialogOeffnen函数，接收ID和标题参数，动态更新弹窗标题，并添加隐藏字段存储项目ID：

function dialogOeffnen(dialogId, projektId, projektTitel) {
    const dialog = document.getElementById(dialogId);
    const overlay = document.getElementById('body-overlay');
    
    // 更新弹窗标题
    dialog.querySelector('h1').textContent = projektTitel;
    
    // 添加/更新隐藏的项目ID字段
    let idInput = dialog.querySelector('input[name="projekt_id"]');
    if (!idInput) {
        idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'projekt_id';
        dialog.querySelector('form').prepend(idInput);
    }
    idInput.value = projektId;
    
    // 显示弹窗和遮罩
    dialog.style.display = 'block';
    overlay.style.display = 'block';
}

3. 修正弹窗的静态标题和表单 #

把弹窗里的静态PHP标题改成占位符，由JS动态填充；同时修正表单action属性的拼写错误：

<div class="textarea">
    <h1>Projekt Titel</h1>
    <textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" cols="30" rows="10"></textarea>
</div>
<form action="你的处理页面.php" method="POST">

4. 修正现有代码的其他问题 #

• 合并重复的数据库查询：

// 替换原有的两次重复查询
$select = $conn->prepare("SELECT * FROM `projektantrag` WHERE pruefer_ID =? OR pruefer2_ID = ?");
$select->execute([$prüfer_id, $prüfer_id]);
$Ausgabe = $select->fetchAll();

// 获取第一条数据的下载链接（如果需要）
if (!empty($Ausgabe)) {
    $firstRow = $Ausgabe[0];
    $OriginalBeschreibung = $firstRow['Beschreibung'];
    $FileDownload = explode('/', $OriginalBeschreibung);
    $FileActualName = strtolower(end($FileDownload));
}

• 修正表格下载链接（每行使用当前行的文件路径）：

<td>
    <center>
        <?php 
        $rowFileDownload = explode('/', $row["Beschreibung"]);
        $rowFileName = strtolower(end($rowFileDownload));
        ?>
        <a href="uploads/<?php echo $rowFileName ?>">Link</a>
    </center>
</td>

5. 表单提交的后端处理 #

在表单处理页面，通过$_POST['projekt_id']获取选中的项目ID：

if(isset($_POST['submit'])){
    if (!isset($_POST['projekt_id']) || !is_numeric($_POST['projekt_id'])) {
        $message[] = 'Ungültiges Projekt ID';
    } else {
        $projektId = $_POST['projekt_id'];
        $select = $conn->prepare("SELECT * FROM `projektantrag` WHERE ID = ?");
        $select->execute([$projektId]);
        $projektData = $select->fetch(PDO::FETCH_ASSOC);
        
        // 这里添加表单提交后的业务逻辑，比如保存备注、验证密码等
    }
}

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