如何向Bootstrap模态框传值？表格删除操作始终误删首行问题排查

核心问题定位 #

• 你在foreach循环中为每一行都生成了一个id完全为myModal的模态框，而HTML规范要求页面内元素id必须唯一。当点击任意行的触发按钮时，浏览器永远会匹配DOM中第一个出现的同id元素，也就是第一行对应的模态框，最终导致无论点哪行都删除第一行数据。
• 重复在表格行内部嵌套重复的模态结构，既会造成DOM冗余，也会进一步放大同id元素的匹配逻辑偏差。

落地修复步骤 #

1. 把模态框从循环内部移到表格外部，整个页面只保留一个公共的删除确认模态框，不再为每一行重复生成模态结构。
2. 在每一行的删除触发按钮上，用自定义data-*属性存储当前行对应的删除链接。
3. 借助Bootstrap模态框内置的展示事件，动态把当前点击行的删除链接赋值给公共模态框内的表单地址。

修复后的代码参考 #

<tbody>
    <?php $i = 1 + (6 * ($currentPage - 1)); ?>
    <?php foreach ($surat as $s) : ?>
    <tr>
        <td scope="row"><?= $i++; ?></td>
        <td><?= $s['no_sm'] ?></td>
        <td><?= $s['pengirim'] ?></td>
        <td><?= $s['tgl_sm'] ?></td>
        <td>
            <div class="dropdown">
                <button class="btn btn-sm btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-fw fa-list"></i>
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a href="/suratmasukdetail/<?= $s['id']; ?>" class="dropdown-item">Detail</a>
                    <!-- 带自定义删除地址的触发按钮 -->
                    <a 
                        href="#deleteModal" 
                        class="dropdown-item" 
                        data-delete-url="/suratmasuk/delete/<?= $s['id']; ?>"
                        data-toggle="modal"
                    >
                        Hapus
                    </a>
                </div>
            </div>
        </td>
    </tr>
    <?php endforeach; ?>
</tbody>

<!-- 公共删除模态框，放置在循环结构外部 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <form id="deleteForm" action="" method="post">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    Apakah anda yakin ingin menghapus data ini?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 模态框动态传值逻辑 -->
<script>
$('#deleteModal').on('show.bs.modal', function (event) {
    const triggerElement = $(event.relatedTarget)
    const targetDeleteUrl = triggerElement.data('delete-url')
    $('#deleteForm').attr('action', targetDeleteUrl)
})
</script>

优化效果 #

• 从根源上消除id重复导致的元素匹配错误，点击任意行的删除按钮，模态框都会精准匹配当前行对应的删除ID
• 删除循环内重复生成的冗余DOM节点，降低页面体积与渲染开销
• 保留原有的POST表单提交删除逻辑，不会因为修改破坏原有后端接口的接收规则

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