基于模态框点击显示对应数据：JavaScript 实现方案-php教程-PHP中文网

基于模态框点击显示对应数据：JavaScript 实现方案

碧海醫心

发布： 2025-10-14 12:20:46

原创

880人浏览过

基于模态框点击显示对应数据：javascript 实现方案

本文旨在提供一种利用 JavaScript 技术，在点击表格行中的链接时，动态更新模态框内容并显示相应数据的解决方案。通过此方案，你可以避免为每行数据创建单独的模态框，从而优化页面结构和性能。文章将详细介绍实现步骤，并提供示例代码，助你轻松实现此功能。

在实际的 Web 开发中，经常会遇到需要在表格中展示数据，并且点击某一行的数据时，弹出一个模态框显示该数据的详细信息的需求。如果为每一行数据都创建一个模态框，会导致页面结构冗余，性能下降。本文将介绍如何使用 JavaScript 动态地更新模态框的内容，从而实现高效的数据展示。

1. HTML 结构调整

首先，需要对 HTML 结构进行调整，移除循环中重复的模态框定义，只保留一个模态框的定义，将其放在循环之外。同时，为每个触发模态框的链接添加一个唯一的标识符，例如使用 data-* 属性存储与该行数据相关的信息。

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

?>

<table>
  <thead>
    <tr>
      <th>CCC Employee</th>
      <th>IR Number</th>
      <th>Case Type</th>
      <th>Start Date Time</th>
      <th>End Date Time</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <?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-start-date="<?php echo htmlspecialchars($res['startDateTime']) ?>" data-end-date="<?php echo htmlspecialchars($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 -->
  </tbody>
</table>

<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">
        <!-- Content will be dynamically updated here -->
      </div>
    </div>
  </div>
</div>

登录后复制

关键修改:

立即学习“Java免费学习笔记（深入）”；

唯一的模态框: 只有一个 modal fade div，放在 PHP 循环之外。
*`data-属性:** 每个链接使用data-case-type,data-ir-number,data-start-date,data-end-date等属性存储对应的数据。htmlspecialchars()` 函数用于转义特殊字符，防止 XSS 攻击。
modalLauncher 类: 给每个链接添加了 modalLauncher 类，方便 JavaScript 代码选择。
占位符: modal-title-default 和 modal-body-content 用于放置动态内容。

2. JavaScript 代码实现

接下来，使用 JavaScript 代码监听链接的点击事件，获取 data-* 属性中的数据，并更新模态框的内容。

Logomaster.ai

Logo在线生成工具

查看详情

$(document).ready(function(){
  $(".modalLauncher").click(function(e){
    e.preventDefault(); // Prevent default link behavior

    var caseType = $(this).data('case-type');
    var irNumber = $(this).data('ir-number');
    var startDate = $(this).data('start-date');
    var endDate = $(this).data('end-date');

    // Update modal content
    $("#modal-title-default").text(caseType);
    $("#modal-body-content").html(
      "<p><strong>IR Number:</strong> " + irNumber + "</p>" +
      "<p><strong>Start Date:</strong> " + startDate + "</p>" +
      "<p><strong>End Date:</strong> " + endDate + "</p>"
    );

    // Show the modal
    $("#modal-default").modal('show');
  });
});

登录后复制

代码解释:

$(document).ready(): 确保在 DOM 加载完成后执行 JavaScript 代码。
.modalLauncher 选择器: 选择所有带有 modalLauncher 类的链接。
click(function(e){ ... }): 为每个链接添加点击事件监听器。
e.preventDefault(): 阻止链接的默认行为，防止页面跳转。
$(this).data('...'): 从当前点击的链接的 data-* 属性中获取数据。
$("#modal-title-default").text(...) 和 $("#modal-body-content").html(...): 更新模态框的标题和内容。
$("#modal-default").modal('show'): 显示模态框。

3. 完整示例代码

将上述 HTML 和 JavaScript 代码整合，即可实现基于模态框点击显示对应数据的完整功能。

<!DOCTYPE html>
<html>
<head>
  <title>Modal Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".modalLauncher").click(function(e){
        e.preventDefault(); // Prevent default link behavior

        var caseType = $(this).data('case-type');
        var irNumber = $(this).data('ir-number');
        var startDate = $(this).data('start-date');
        var endDate = $(this).data('end-date');

        // Update modal content
        $("#modal-title-default").text(caseType);
        $("#modal-body-content").html(
          "<p><strong>IR Number:</strong> " + irNumber + "</p>" +
          "<p><strong>Start Date:</strong> " + startDate + "</p>" +
          "<p><strong>End Date:</strong> " + endDate + "</p>"
        );

        // Show the modal
        $("#modal-default").modal('show');
      });
    });
  </script>
</head>
<body>

  <?php
    // 模拟数据，实际情况从数据库获取
    $data = [
      ['cccEmployee' => 'John Doe', 'irNumber' => 'IR001', 'caseType' => 'Accident', 'startDateTime' => '2023-10-26 09:00:00', 'endDateTime' => '2023-10-26 10:00:00'],
      ['cccEmployee' => 'Jane Smith', 'irNumber' => 'IR002', 'caseType' => 'Theft', 'startDateTime' => '2023-10-27 14:00:00', 'endDateTime' => '2023-10-27 15:00:00'],
      ['cccEmployee' => 'Peter Jones', 'irNumber' => 'IR003', 'caseType' => 'Fraud', 'startDateTime' => '2023-10-28 11:00:00', 'endDateTime' => '2023-10-28 12:00:00'],
    ];
  ?>

  <div class="container">
    <h2>Case Reports</h2>
    <table class="table">
      <thead>
        <tr>
          <th>CCC Employee</th>
          <th>IR Number</th>
          <th>Case Type</th>
          <th>Start Date Time</th>
          <th>End Date Time</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($data as $row): ?>
          <tr>
            <td><?php echo $row['cccEmployee']; ?></td>
            <td><?php echo $row['irNumber']; ?></td>
            <td><a href="#" class="modalLauncher" data-case-type="<?php echo htmlspecialchars($row['caseType']); ?>" data-ir-number="<?php echo htmlspecialchars($row['irNumber']); ?>" data-start-date="<?php echo htmlspecialchars($row['startDateTime']); ?>" data-end-date="<?php echo htmlspecialchars($row['endDateTime']); ?>" data-toggle="modal" data-target="#modal-default"><?php echo $row['caseType']; ?></a></td>
            <td><?php echo $row['startDateTime']; ?></td>
            <td><?php echo $row['endDateTime']; ?></td>
            <td>
              <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Actions
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <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 endforeach; ?>
      </tbody>
    </table>

    <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">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="modal-body-content">
            <!-- Content will be dynamically updated here -->
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

登录后复制

注意事项: