PHP点击行内pre-View_attend按钮无法准确获取对应行WorkloadID与subjectID

方案1：每行包裹独立表单（后端友好的最简方案） #

你之前拿不到对应行ID的核心原因，大概率是所有行的隐藏字段和按钮共用了同一个表单，导致提交时服务器只能拿到最后一行的参数。最直接的解决办法是给表格的每一行都单独套一个<form>，让每行的ID隐藏字段和提交按钮都属于当前行的独立表单。

示例代码（假设用PHP渲染表格）：

<table>
  <thead>
    <tr>
      <th>工作量详情</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($workloadList as $item): ?>
    <tr>
      <td><?= $item['workloadDetails'] ?></td>
      <td>
        <form method="post" action="your-handler.php">
          <!-- 把两个ID都作为当前行表单的隐藏字段 -->
          <input type="hidden" name="WorkloadID" value="<?= $item['WorkloadID'] ?>">
          <input type="hidden" name="subjectID" value="<?= $item['subjectID'] ?>">
          <button type="submit" name="pre-View_attend">pre-View_attend</button>
        </form>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

后端处理代码（PHP为例）：

<?php
if (isset($_POST['pre-View_attend'])) {
    // 直接拿到点击行对应的两个ID
    $targetWorkloadID = $_POST['WorkloadID'];
    $targetSubjectID = $_POST['subjectID'];
    
    // 后续业务逻辑处理
    // ...
}
?>

这个方法不需要额外写JS，纯后端就能搞定，兼容性拉满，适合传统后端渲染的场景。

方案2：用JavaScript绑定行数据（适合AJAX异步提交） #

如果不想刷新页面，想用异步请求提交数据，可以给按钮添加data-*属性来存储当前行的两个ID，点击时通过JS读取这些属性值。

示例HTML：

<table>
  <tbody>
    <?php foreach ($workloadList as $item): ?>
    <tr>
      <td><?= $item['workloadDetails'] ?></td>
      <td>
        <button class="view-btn" 
                data-workloadid="<?= $item['WorkloadID'] ?>" 
                data-subjectid="<?= $item['subjectID'] ?>">
          pre-View_attend
        </button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

原生JS处理代码：

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.view-btn');
  buttons.forEach(btn => {
    btn.addEventListener('click', function() {
      // 从按钮的data属性里读取对应行的ID
      const workloadID = this.dataset.workloadid;
      const subjectID = this.dataset.subjectid;
      
      // 这里可以做AJAX提交，或者其他前端处理
      console.log('当前点击行的WorkloadID:', workloadID, 'SubjectID:', subjectID);
      
      // 示例：用fetch发送异步请求
      fetch('your-handler.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `WorkloadID=${workloadID}&subjectID=${subjectID}&pre-View_attend=1`
      })
      .then(res => res.text())
      .then(result => {
        // 处理后端返回的结果
        console.log(result);
      });
    });
  });
});

后端的处理逻辑和方案1完全一致，通过$_POST就能拿到精准的ID值。

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