PHP循环生成表格点击模态框如何显示对应条目的详细数据

问题原因 #

你当前所有模态框的id都固定写为modal-default，而HTML中id属性要求全局唯一，触发链接的data-target匹配时只会找到第一个符合id的模态框，所以永远显示第一条数据的内容。

方案1：生成唯一ID绑定对应模态框（改动最小，易实现） #

用每条记录的唯一标识（比如表主键ID、现有irNumber字段）拼接模态框ID，保证每个模态框ID唯一，同时修改触发链接的data-target和其匹配即可。

修改对应两处代码即可：

1. 触发链接部分：

<!-- 原来的写法 -->
<!-- <a href="#" data-toggle="modal" data-target="#modal-default"><?php echo $res['caseType']?></a> -->
<!-- 修改后 -->
<a href="#" data-toggle="modal" data-target="#modal-<?php echo $res['irNumber']?>"><?php echo $res['caseType']?></a>

2. 模态框头部部分：

<!-- 原来的写法 -->
<!-- <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true"> -->
<!-- 修改后 -->
<div class="modal fade" id="modal-<?php echo $res['irNumber']?>" tabindex="-1" role="dialog" aria-labelledby="modal-<?php echo $res['irNumber']?>" aria-hidden="true">

方案2：共用单个模态框动态传值（适合数据量大的场景） #

如果表格数据较多，循环生成大量模态框会增加DOM冗余，你可以把模态框移出循环全局复用，点击时动态把对应数据写入模态框：

1. 将模态框完整代码从while循环中移出，放到页面底部位置，id保持modal-default即可
2. 给触发链接添加自定义data属性存储需要展示的字段：

<a href="#" data-toggle="modal" data-target="#modal-default" 
  data-case-type="<?php echo $res['caseType']?>"
  <!-- 其他需要在模态框展示的字段都可以在这里加data-*属性 -->
><?php echo $res['caseType']?></a>

3. 新增一段JS监听模态框显示事件，动态赋值：

$('#modal-default').on('show.bs.modal', function (event) {
  // 获取触发当前模态框的a标签元素
  const triggerBtn = $(event.relatedTarget)
  // 读取data属性的值
  const caseType = triggerBtn.data('case-type')
  const modal = $(this)
  // 给模态框的标题、内容赋值
  modal.find('.modal-title').text(caseType)
  modal.find('.modal-body').text(caseType)
  // 其他字段同理赋值即可
})

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