本文旨在解决在循环生成的表格中，点击每一行数据对应的链接，弹出模态框并展示该行特定数据的需求。通过JavaScript监听点击事件，动态更新模态框内容，实现数据的精准展示，避免所有模态框显示相同数据的常见问题。
问题分析
在循环中直接生成模态框，并为每个链接设置相同的data-target属性指向同一个模态框ID，会导致所有链接点击后都只会显示第一条数据。这是因为所有的链接都触发了同一个模态框，而模态框的内容在页面加载时就已经被填充为第一条数据。
解决方案：JavaScript动态加载模态框数据
核心思路是：
- 移除循环中模态框的直接生成：避免在 PHP 循环中重复生成具有相同 ID 的模态框。
- 使用 JavaScript 监听链接点击事件：为每个链接添加一个唯一的标识，并通过 JavaScript 监听点击事件。
- 动态更新模态框内容：在点击事件处理函数中，获取与链接关联的数据，并动态更新模态框的标题和内容。
- 程序化地调用模态框：使用 JavaScript 代码来打开模态框。
具体步骤
1. 修改 PHP 代码
首先，修改 PHP 代码，移除循环中模态框的直接生成，并为每个链接添加一个唯一的标识（例如，使用 data-* 属性存储数据），并赋予一个通用的id，例如modalLauncher。
<?php
$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));
$selectquery = "SELECT * FROM cases_reports";
$query = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($query);
while($res = mysqli_fetch_array($query)) {
?>
<tr>
<td class="name mb-0 text-sm"> <?php echo $res['cccEmployee']?> </td>
<td> <?php echo $res['irNumber']?> </td>
<td> <a href="#" class="modalLauncher" data-case-type="<?php echo $res['caseType']?>" data-start-date="<?php echo $res['startDateTime']?>" data-end-date="<?php echo $res['endDateTime']?>" data-toggle="modal" data-target="#modal-default"><?php echo $res['caseType']?></a> </td>
<td> <?php echo $res['startDateTime']?> </td>
<td> <?php echo $res['endDateTime']?> </td>
<td>
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Print PDF</a>
<a class="dropdown-item" href="#">Export Excel</a>
<a class="dropdown-item" href="#">Export Access</a>
</div>
</div>
</td>
</tr>
<?php }?> <!-- End php While -->
<!-- 模态框只需定义一次，放在循环外面 -->
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default"></h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modal-body-content">
<!-- 动态加载内容 -->
</div>
</div>
</div>
</div>2. 编写 JavaScript 代码
接下来，编写 JavaScript 代码，监听链接的点击事件，并动态更新模态框的内容。
$(document).ready(function() {
$(".modalLauncher").click(function(e) {
e.preventDefault(); // 阻止链接的默认行为
// 获取数据
var caseType = $(this).data('case-type');
var startDate = $(this).data('start-date');
var endDate = $(this).data('end-date');
// 更新模态框标题和内容
$("#modal-title-default").text(caseType);
$("#modal-body-content").html("<p>Start Date: " + startDate + "</p><p>End Date: " + endDate + "</p>");
// 显示模态框
$("#modal-default").modal('show');
});
});代码解释:
- $(".modalLauncher").click(function(e) { ... });: 选择所有 class 为 modalLauncher 的元素（也就是你的链接），并为它们绑定点击事件。
- e.preventDefault();: 阻止链接的默认行为，避免页面跳转。
- $(this).data('case-type');: 从当前点击的链接的 data-case-type 属性中获取数据。 $(this) 指的是当前点击的链接。
- $("#modal-title-default").text(caseType);: 使用获取到的 caseType 数据更新 id 为 modal-title-default 的元素（模态框标题）的文本内容。
- $("#modal-body-content").html("zuojiankuohaophpcnp>Start Date: " + startDate + "</p><p>End Date: " + endDate + "</p>");: 使用获取到的 startDate 和 endDate 数据更新 id 为 modal-body-content 的元素（模态框内容）的 HTML 内容。 这里使用了简单的 HTML 格式，你可以根据需要自定义模态框内容的展示方式。
- $("#modal-default").modal('show');: 以编程方式显示 id 为 modal-default 的模态框。
3. 引入 jQuery (如果尚未引入)
确保你的页面引入了 jQuery 库，因为上面的 JavaScript 代码使用了 jQuery。 你可以在 HTML 文件的 <head> 标签中添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
4. 放置 JavaScript 代码
将 JavaScript 代码放在 HTML 文件的 </body> 标签之前，或者放在 <head> 标签内的 <script> 标签中，并确保在 jQuery 库之后加载。
注意事项
- 确保每个链接的 data-* 属性中存储了正确的数据。
- 根据实际需求，修改 JavaScript 代码，以适应不同的数据格式和模态框内容。
- 如果模态框无法正常显示，请检查 HTML 结构和 CSS 样式是否正确。
- 确保 jQuery 库已正确引入。
- 根据实际情况，调整 CSS 样式以美化模态框的显示效果。
- 如果数据量较大，可以考虑使用 AJAX 技术异步加载模态框内容，以提高页面加载速度。
总结
通过 JavaScript 监听点击事件，动态更新模态框内容，可以有效地解决循环生成的表格中，点击链接后模态框显示相同数据的问题。 这种方法灵活可扩展，可以应用于各种需要动态展示数据的场景。 记住，关键在于为每个链接添加唯一的标识，并使用 JavaScript 代码获取与链接关联的数据，并将其动态更新到模态框中。
