如何使用 jQuery 在 Bootstrap 模型中显示表格选定行的内容？(1)

📌 相关文章

📜 如何使用 jQuery 在 Bootstrap 模型中显示表格选定行的内容？(1)

📅 最后修改于: 2023-12-03 15:08:21.947000 🧑 作者: Mango

如何使用 jQuery 在 Bootstrap 模态框中显示表格选定行的内容？

在进行 web 开发时，我们通常需要用到一些表格展示数据。在某些情况下，我们需要为表格添加一个模态框，以便用户可以轻松地查看特定行的详细信息。这种情况下，我们可以使用 jQuery 和 Bootstrap 来实现这一目标。

准备工作

在开始编写代码之前，我们需要准备一些东西：

Bootstrap 模态框：我们将使用 Bootstrap 的模态框组件来显示表格行的详细信息。
HTML 表格：这是我们将在模态框中显示的数据。
jQuery 库：我们需要引入 jQuery 库来简化 JavaScript 开发。

在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal Example</title>
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- 添加一个表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Bob Johnson</td>
        <td>bob@example.com</td>
      </tr>
    </tbody>
  </table>

  <!-- 添加一个模态框 -->
  <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">User Details</h4>
        </div>
        <div class="modal-body">
          <!-- 在这里添加表格行的详细信息 -->
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 jQuery 库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引入 Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

显示选定的表格行

现在我们已经准备好了所需的 HTML 和 JavaScript，我们需要编写一些代码来处理用户选择的表格行并将其显示在模态框中。

在我们开始之前，我们需要回顾一下一些 jQuery 选择器，我们将在其中使用：

$(selector).click()：当用户单击匹配的元素时，会触发此事件处理程序。
$(selector).text()：获取或设置匹配元素的纯文本内容。
$(selector).html()：获取或设置匹配元素的 HTML 内容。

现在，我们将编写一个函数来处理用户选择的表格行：

$(document).ready(function() {
  $('table tbody tr').click(function() {
    // 获取表格行的 ID，这是第一个单元格的内容
    var id = $(this).find('td:first').html();
    
    // 获取表格行的名称，这是第二个单元格的内容
    var name = $(this).find('td:nth-child(2)').html();
    
    // 获取表格行的电子邮件地址，这是第三个单元格的内容
    var email = $(this).find('td:nth-child(3)').html();

    // 将所选表格行的详细信息添加到模态框中
    $('#myModal .modal-body').html('<p><strong>ID:</strong> ' + id + '</p><p><strong>Name:</strong> ' + name + '</p><p><strong>Email:</strong> ' + email + '</p>');

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

在这段代码中，我们使用 .click() 方法为表格行添加单击事件的处理程序。当用户单击表格行时，我们获取所选的行的 ID、名称和电子邮件地址，并将其添加到模态框中。

完整代码

下面是完整的 HTML 和 JavaScript 代码，包括上面提到的所有代码和函数：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal Example</title>
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- 添加一个表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Bob Johnson</td>
        <td>bob@example.com</td>
      </tr>
    </tbody>
  </table>

  <!-- 添加一个模态框 -->
  <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">User Details</h4>
        </div>
        <div class="modal-body">
          <!-- 在这里添加表格行的详细信息 -->
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 jQuery 库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引入 Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('table tbody tr').click(function() {
        // 获取表格行的 ID，这是第一个单元格的内容
        var id = $(this).find('td:first').html();
        
        // 获取表格行的名称，这是第二个单元格的内容
        var name = $(this).find('td:nth-child(2)').html();
        
        // 获取表格行的电子邮件地址，这是第三个单元格的内容
        var email = $(this).find('td:nth-child(3)').html();

        // 将所选表格行的详细信息添加到模态框中
        $('#myModal .modal-body').html('<p><strong>ID:</strong> ' + id + '</p><p><strong>Name:</strong> ' + name + '</p><p><strong>Email:</strong> ' + email + '</p>');

        // 显示模态框
        $('#myModal').modal('show');
      });
    });
  </script>
</body>
</html>

我们可以使用这段代码来显示选定的表格行的详细信息。