CodeIgniter中Bootstrap模态框无法匹配对应表格数据问题求助

这个问题大概率是因为模态框ID重复、循环里的元素没做唯一标识，或者数据绑定逻辑没做隔离导致的，给你几个直接的解决方法：

1. 确保每个模态框有唯一ID（循环内渲染模态框方案） #

如果是在表格行循环里直接渲染对应模态框，必须给每个模态框设置唯一ID——不能所有模态框都用同一个id，否则Bootstrap只会识别最后一个匹配的模态框。

示例代码：

<?php foreach ($your_data as $row): ?>
<tr>
  <td><?= $row['id'] ?></td>
  <td><?= $row['title'] ?></td>
  <td>
    <!-- 触发按钮的data-bs-target要对应唯一的模态框ID -->
    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-<?= $row['id'] ?>">
      查看/编辑
    </button>
  </td>
</tr>

<!-- 带唯一ID的模态框 -->
<div class="modal fade" id="modal-<?= $row['id'] ?>" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <!-- 填充当前行的数据 -->
        <p>ID: <?= $row['id'] ?></p>
        <p>标题: <?= $row['title'] ?></p>
        <input type="text" name="title_<?= $row['id'] ?>" value="<?= $row['title'] ?>">
      </div>
    </div>
  </div>
</div>
<?php endforeach; ?>

2. 单个模态框+动态填充数据（更高效方案） #

如果表格数据量大，循环渲染大量模态框会增加DOM体积，更推荐只写一个模态框模板，通过JavaScript动态填充对应行的数据：

视图代码 #

<!-- 表格 -->
<table class="table">
  <tbody>
    <?php foreach ($your_data as $row): ?>
    <tr>
      <td><?= $row['id'] ?></td>
      <td><?= $row['title'] ?></td>
      <td>
        <!-- 按钮添加自定义属性存储当前行数据 -->
        <button class="btn btn-sm btn-primary modal-trigger" 
                data-id="<?= $row['id'] ?>"
                data-title="<?= $row['title'] ?>"
                data-content="<?= $row['content'] ?>">
          查看/编辑
        </button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<!-- 单个模态框模板 -->
<div class="modal fade" id="universalModal" 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">
        <input type="hidden" id="modal-id">
        <div class="mb-3">
          <label class="form-label">标题</label>
          <input type="text" class="form-control" id="modal-title">
        </div>
        <div class="mb-3">
          <label class="form-label">内容</label>
          <textarea class="form-control" id="modal-content"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

JavaScript代码 #

// 给所有触发按钮绑定点击事件
document.querySelectorAll('.modal-trigger').forEach(btn => {
  btn.addEventListener('click', function() {
    // 读取按钮上的自定义数据
    const id = this.dataset.id;
    const title = this.dataset.title;
    const content = this.dataset.content;
    
    // 填充到模态框对应元素
    document.getElementById('modal-id').value = id;
    document.getElementById('modal-title').value = title;
    document.getElementById('modal-content').value = content;
    
    // 打开模态框
    const modal = new bootstrap.Modal(document.getElementById('universalModal'));
    modal.show();
  });
});

3. 排查表单元素命名冲突 #

如果循环里的模态框内有表单输入框，不要让输入框的name或id重复——比如不要所有输入框都叫title，要改成title_<?= $row['id'] ?>，否则浏览器会把最后一个同名元素的值作为最终值，导致读取错误。

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