本文旨在解决在循环生成的表格中，点击每一行数据对应的链接，弹出模态框并显示该行特定数据的需求。通过 JavaScript 编程方式控制模态框的显示，并动态加载/替换模态框中的数据，实现每个模态框展示对应数据的详细信息。本文提供详细的步骤和代码示例，帮助开发者快速实现此功能。
问题分析
原始代码存在的问题在于，模态框的 HTML 代码被放置在循环内部，导致所有的链接都指向同一个模态框 id=”modal-default”。因此，无论点击哪个链接，都只会显示第一条数据。要解决这个问题，需要为每个链接和模态框创建唯一的标识符，并使用 JavaScript 来动态更新模态框的内容。
解决方案
核心思路是：
- 为每个链接添加唯一标识符： 使用 data-* 属性存储与该链接对应的数据。
- 使用 JavaScript 监听链接点击事件： 当点击链接时，获取 data-* 属性中的数据。
- 动态更新模态框内容： 使用获取到的数据更新模态框的标题和内容。
- 显示模态框： 使用 JavaScript 触发模态框的显示。
详细步骤
1. 修改 PHP 代码
首先，修改 PHP 代码，为每个链接添加唯一的标识符和 data-* 属性，并将模态框的 HTML 代码移到循环外部。
<?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)) {
$unique_id = 'modal-' . $res['irNumber']; // 生成唯一的 ID，例如 modal-123
?>
<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-toggle="modal" data-target="#modal-default" data-case-type="<?php echo $res['caseType']?>" data-ir-number="<?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>
<?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>
登录后复制
关键修改：
- 将 zuojiankuohaophpcna> 标签的 data-target 属性设置为 #modal-default，统一指向一个模态框。
- 为 <a> 标签添加了 data-case-type 和 data-ir-number 属性，存储了 caseType 和 irNumber 的值。
- 将模态框的 HTML 代码移到了循环外部，确保只有一个模态框。
- 添加了 id=”modal-body-content” 到 modal-body，方便后续使用 JavaScript 更新内容。
- 添加了 class=”modalLauncher” 到 <a> 标签，方便后续使用 JavaScript 选择器。
2. 编写 JavaScript 代码
接下来，编写 JavaScript 代码来监听链接的点击事件，并动态更新模态框的内容。
$(document).ready(function() {
$(".modalLauncher").click(function(event) {
event.preventDefault(); // 阻止默认的链接跳转行为
// 获取 data-* 属性中的数据
var caseType = $(this).data('case-type');
var irNumber = $(this).data('ir-number');
// 更新模态框标题和内容
$("#modal-title-default").text(caseType + " - " + irNumber);
$("#modal-body-content").text("Case Type: " + caseType + ", IR Number: " + irNumber);
// 显示模态框
$("#modal-default").modal('show');
});
});
登录后复制
代码解释：
- $(document).ready(function() { … }); 确保在 DOM 加载完成后执行 JavaScript 代码。
- $(“.modalLauncher”).click(function(event) { … }); 监听所有 class 为 modalLauncher 的元素的点击事件。
- event.preventDefault(); 阻止链接的默认跳转行为。
- $(this).data(‘case-type’); 和 $(this).data(‘ir-number’); 获取当前点击链接的 data-case-type 和 data-ir-number 属性的值。
- $(“#modal-title-default”).text(caseType + ” – ” + irNumber); 更新模态框的标题。
- $(“#modal-body-content”).text(“Case Type: ” + caseType + “, IR Number: ” + irNumber); 更新模态框的内容。
- $(“#modal-default”).modal(‘show’); 显示模态框。
3. 引入 jQuery (如果尚未引入)
确保你的 HTML 文件中已经引入了 jQuery 库，因为上面的 JavaScript 代码依赖于 jQuery。可以在 HTML 文件的 <head> 标签中添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
登录后复制
总结
通过以上步骤，就可以实现点击表格中的链接，弹出模态框并显示对应数据的详细信息。 核心在于使用 JavaScript 动态更新模态框的内容，而不是为每个数据创建一个新的模态框。
注意事项：
- 确保为每个链接生成唯一的标识符，避免 ID 冲突。
- 使用 data-* 属性存储与链接相关的数据，方便 JavaScript 获取。
- 在 JavaScript 代码中使用 event.preventDefault() 阻止链接的默认跳转行为。
- 确保在 DOM 加载完成后执行 JavaScript 代码。
- 根据实际需求，可以修改模态框的标题和内容，以及显示的数据。
- 如果数据量较大，可以考虑使用 AJAX 从服务器端获取数据，并在模态框中显示。
- 可以根据实际情况修改 HTML 结构和 CSS 样式，以满足不同的需求。
这个教程提供了一个基本框架，可以根据实际需求进行修改和扩展。 希望能帮助你解决问题。
以上就是基于模态框点击展示不同数据的教程的详细内容，更多请关注php中文网其它相关文章！
相关标签：