您可以使用Bootstrap的Table组件和Font Awesome图标库来实现您的需求。以下是一个示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.1/css/all.min.css">
  <title>Bootstrap Table</title>
</head>
<body>
  <table id="myTable" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td><i class="fa fa-eye" data-toggle="modal" data-target="#myModal"></i></td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>jane@example.com</td>
        <td>*****</td>
      </tr>
    </tbody>
  </table>

  <!-- Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">User Details</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <!-- Display user details here -->
          <p>Name: John Doe</p>
          <p>Email: john@example.com</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>

在上面的示例代码中,我们使用了Bootstrap的Table组件来创建一个表格,并在"Action"列中使用了Font Awesome图标库中的眼睛图标。当点击眼睛图标时,会弹出一个模态框(Modal)来显示对应行的数据。

请根据您的需求修改表格的内容和模态框中的数据显示方式

JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以弹出小模态框查看bootStraptable查询数据库列表返回的对应的那一列那一行的数据如果不满足条件则显示

原文地址: https://www.cveoy.top/t/topic/iooR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录