数据库动态数据在Modal弹窗展示异常：仅显示最后一行数据

问题描述 #

数据库中存储了一批交易数据，已实现查询并在表格行中展示部分信息，每行都有指向Modal弹窗的链接用于查看该行详细数据，但点击任意行的链接时，只会弹出最后一行的详细数据，其余行无法正常弹出对应弹窗。

原因分析 #

• 表格循环遍历数据时，每行链接的data-bs-target都正确指向了对应ID的弹窗（如#viewtransaction1、#viewtransaction2）；
• 但弹窗代码写在循环外部，仅在循环结束后执行一次，此时$curid的值是最后一条数据的ID，因此页面上只生成了最后一条数据对应的弹窗；
• 其他行的链接指向的弹窗ID不存在，浏览器无法找到对应元素，最终只会触发唯一存在的那个弹窗（最后一行的）。

解决方案 #

将弹窗代码嵌入到表格的while循环内部，确保每遍历一行数据，就生成一个对应ID的弹窗，保证每个链接的data-bs-target都能匹配到对应的弹窗元素。同时修复SQL注入风险，使用mysqli预处理语句。

修正后的完整代码 #

<table class="table table-responsive table-hover">
  <tbody>
    <?php 
        while($rstransaction = mysqli_fetch_array($gettransactions)){ 
    ?>
    <tr>
      <td scope="row" style="width:60%;">
        <a href="#" data-bs-toggle="modal" data-bs-target="#viewtransaction<?php echo $rstransaction['id']; ?>">
          <i class="fas fa-caret-square-down"></i> &nbsp;&nbsp;Transaction ID: 0000<?php echo $rstransaction['id']; ?>
        </a>
      </td>
      <td scope="col"><i class="fa fa-bell"></i></td>
      <td scope="col"><i class="fas fa-ticket-alt"></i></td>
      <td scope="col"><i class="fas fa-chart-line"></i> Analytics</td>
      <td scope="col"><i class="fas fa-user-edit"></i> Add Stakeholder</td>
    </tr>

    <!-- 对应该行的弹窗，嵌入循环内部 -->
    <?php 
        // 使用预处理语句避免SQL注入
        $stmt = $conn->prepare("SELECT * FROM transaction WHERE id = ?");
        $stmt->bind_param("i", $rstransaction['id']);
        $stmt->execute();
        $displaytransaction = $stmt->get_result();
        $showtr = $displaytransaction->fetch_array();
        $stmt->close();
    ?>
    <div class="modal fade" id="viewtransaction<?php echo $showtr['id']; ?>" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalCenterTitle-<?php echo $showtr['id']; ?>" aria-hidden="true">
      <div style="--bs-modal-width: 90% !important;" class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalCenterTitle-<?php echo $showtr['id']; ?>">Transaction ID: 0000<?php echo $showtr['id']; ?></h5>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-5">
                    <p>Transaction Date: <?php echo $showtr['created_at']; ?></p>
                    <p>Crop Type: <?php echo $showtr['croptype']; ?></p>
                    <p>Crop Specification: <?php echo $showtr['cropspecification']; ?></p>
                    <p>Use: <?php echo $showtr['cropuse']; ?></p>
                </div>
                <div class="col-5">
                    <p>Buyer: <?php echo $showtr['buyer']; ?></p>
                    <p>Buyer Rep: <?php echo $showtr['buyer_rep']; ?></p>
                    <p>Buyer State: <?php echo $showtr['buyerdestinationstate']; ?></p>
                    <p>Buyer LGA: <?php echo $showtr['buyerdestinationlga']; ?></p>
                </div>
                <div class="col-2">
                    <div>
                        <p>Quantity <br><?php echo $showtr['quantity']; ?></p>
                        <p>Amount <br><?php echo $showtr['cropvalue'] * $showtr['quantity']; ?></p>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php } ?>
  </tbody>
</table>

补充说明 #

• 把弹窗代码移到while循环内部，每一行数据对应生成一个弹窗，ID与该行链接的data-bs-target完全匹配；
• 替换了原始的SQL查询方式，使用mysqli预处理语句绑定参数，避免SQL注入风险；
• 修改了弹窗的aria-labelledby和标题ID，确保每个弹窗的辅助属性唯一，符合HTML规范；
• 修正了弹窗关闭按钮的属性，从data-dismiss改为Bootstrap 5的data-bs-dismiss（如果使用Bootstrap 4则保持data-dismiss，根据实际版本调整）。

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