本文旨在解决在循环生成的表格中，点击每一行数据对应的模态框链接时，如何动态地展示该行数据的详细信息。通过JavaScript编程的方式，实现模态框内容的动态加载和替换，确保每个模态框都能准确显示其对应的数据内容，从而提升用户体验。
动态加载模态框数据
在循环生成表格时，直接在PHP循环中创建多个具有相同ID的模态框会导致问题，因为JavaScript无法区分它们。正确的做法是：每个链接都应该触发一个JavaScript函数，该函数负责更新模态框的内容并显示模态框。
1. 修改HTML结构
首先，修改zuojiankuohaophpcna>标签，添加一个唯一的标识符，例如使用 data-* 属性来存储与该行数据相关的信息，并添加一个唯一的ID。
<?php
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 htmlspecialchars($res['caseType']) ?>" data-ir-number="<?php echo htmlspecialchars($res['irNumber']) ?>" data-toggle="modal" data-target="#modal-default-<?php echo $res['irNumber'] ?>"><?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>
<div class="modal fade" id="modal-default-<?php echo $res['irNumber'] ?>" 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-<?php echo $res['irNumber'] ?>"> <?php echo $res['caseType']?> </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-<?php echo $res['irNumber'] ?>">
<?php
echo $res['caseType'];
?>
</div>
</div>
</div>
<?php }?> <!-- End php While -->2. 编写JavaScript代码
接下来，使用JavaScript来监听链接的点击事件，并动态更新模态框的内容。
$(document).ready(function(){
$(".modalLauncher").click(function(e){
e.preventDefault(); // 阻止默认的链接行为
var caseType = $(this).data('case-type');
var irNumber = $(this).data('ir-number');
var modalId = "#modal-default-" + irNumber;
var modalTitleId = "#modal-title-default-" + irNumber;
var modalBodyId = "#modal-body-" + irNumber;
// 更新模态框标题
$(modalTitleId).html(caseType);
// 更新模态框内容 (这里可以根据需要加载更详细的数据)
$(modalBodyId).html("详细信息: " + caseType + ", IR Number: " + irNumber);
// 显示模态框
$(modalId).modal('show');
});
});代码解释:
- $(".modalLauncher").click(function(e){ ... });：为所有class为 modalLauncher 的链接绑定点击事件。
- e.preventDefault();：阻止链接的默认行为，防止页面跳转。
- $(this).data('case-type'); 和 $(this).data('ir-number');：从点击的链接的 data-* 属性中获取数据。
- $("#modal-title-default").html(caseType);：更新模态框标题的内容。
- $("#modal-body").html("详细信息: " + caseType + ", IR Number: " + irNumber);：更新模态框主体的内容。 这里可以替换成更复杂的逻辑，例如通过AJAX请求从服务器获取更详细的数据。
- $("#modal-default").modal('show');：显示模态框。
3. 注意事项
- 确保引入了 jQuery 库。
- data-* 属性的值在 HTML 中会被自动转义，如果包含特殊字符，需要使用 htmlspecialchars() 函数进行编码，防止XSS攻击。
- 模态框的 HTML 结构应该位于 while 循环之外，避免重复生成相同的 HTML 元素。
- 如果需要加载更详细的数据，可以使用 AJAX 请求从服务器获取数据，并在回调函数中更新模态框的内容。
4. 总结
通过以上步骤，可以实现点击表格中的链接时，动态加载并显示对应数据的模态框。这种方法避免了在循环中创建重复ID的模态框，并且能够灵活地加载和展示数据，提升了用户体验。
