基于模态框点击事件动态展示数据教程

<?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>

$(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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9921">
                            <img src="https://img.php.cn/upload/webcode/000/000/019/176032800398270.png" alt="千博企业网站管理系统个人SQL版20120128">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9921">千博企业网站管理系统个人SQL版20120128</a>
                            <p>千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。  千博企业网站管理系统个人版特点： 1.全站模块化操作，静态标签调用，更强扩展性… 千博企业网站系统个人版是一套基于.Net + Access(SQL)建站管理系统软件、不依赖于服务商特定空间、不需安装任何空间商组</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="千博企业网站管理系统个人SQL版20120128">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9921" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="千博企业网站管理系统个人SQL版20120128">
                        </a>
                    </div>
                ");

    // 显示模态框
    $("#modal-default").modal('show');
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>