如何通过JavaScript将PHP变量随按钮传递至弹窗？

问题根源 #

• 弹窗中的<?php echo $row['ID'] ?>位于PHP循环外部，最终只会渲染循环最后一次的$row值，导致所有弹窗显示同一个ID。
• 点击事件未传递当前行的ID参数，JavaScript无法识别点击的是哪一行数据。

修复步骤 #

• 修改表格行的点击事件，传递对应ID
  在PHP循环生成表格行时，将当前行的ID作为参数传入dialogOeffnen函数，同时给行添加data-id属性做备份：

<?php
foreach ($Ausgabe as $row) {
?>
<form>
<!-- 修改onclick事件，添加ID参数，同时增加data-id属性 -->
<tr onclick="dialogOeffnen('loslegen-dialog', <?php echo $row['ID']; ?>)" data-id="<?php echo $row['ID']; ?>">
    <td><?php echo $row["ID"] . "<br>"; ?></td>
    <!-- 其他列代码保持不变 -->
</tr>
</form>
<?php
}
?>

• 修改弹窗结构，预留动态更新ID的位置
  将弹窗中固定输出ID的PHP代码替换为一个可被JavaScript修改的元素：

<div class="dialog" id="loslegen-dialog">
  <a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
    <i class="fas fa-times"></i>
  </a>
  <div class="textarea">
    <!-- 替换原PHP输出为带ID的空元素 -->
    <h1 id="dialog-display-id"></h1>
    <textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" cols="30" rows="10"></textarea>
  </div>
  <!-- 其他表单代码保持不变 -->
</div>

• 更新JavaScript函数，接收并显示ID
  修改dialogOeffnen函数，增加ID参数，动态更新弹窗内的ID显示：

function dialogOeffnen(dialogId, rowId) {
    const dialog = document.getElementById(dialogId);
    dialog.classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
    // 更新弹窗中的ID显示
    document.getElementById("dialog-display-id").textContent = rowId;
}

function dialogSchliessen(dialogId) {
    document.getElementById(dialogId).classList.remove("sichtbar");
    document.getElementById("body-overlay").classList.remove("sichtbar");
}

额外优化建议 #

• 如果需要读取该行的完整数据，可以提前将整行数据通过data-*属性存储在表格行上，或者通过AJAX请求根据ID从后端获取完整数据。
• 避免将表单直接包裹在<tr>标签外，不符合HTML规范，建议将表单放在单元格内或使用整行数据提交的其他方式。

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