语义 UI 表可选行变化(1)

📌 相关文章

📜 语义 UI 表可选行变化(1)

📅 最后修改于: 2023-12-03 14:57:42.448000 🧑 作者: Mango

语义 UI 表可选行变化

语义 UI 是指通过语义化的 HTML 标签和属性，以及结构化的 CSS 类名来实现样式和交互的编写方式。语义 UI 可以帮助开发者写出更加易于阅读和维护的代码。

在语义 UI 中，表格是一个比较常见的组件。为了增强表格的可读性和交互性，我们通常需要对表格的选中行进行变化。下面，我们将介绍如何利用语义 UI 的思想，实现表格的可选行变化功能。

准备工作

在开始编写代码之前，我们需要先引入相关的库和样式文件。其中，我们使用 jQuery 作为 JavaScript 库，使用 Semantic UI 作为 CSS 框架。请在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
  <table class="ui celled table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>23</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
        <td>Male</td>
      </tr>
    </tbody>
  </table>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

实现可选行变化

接下来，我们需要编写 JavaScript 代码来实现表格的可选行变化。我们将使用 jQuery 和 Semantic UI 提供的功能来实现这个功能。

首先，我们需要给表格的每一行添加点击事件，以便我们能够获取到被选中的行。代码如下：

$('.ui.table tbody tr').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});

在这段代码中，我们使用了 $() 函数来选中表格中的每一行。然后，我们使用 click() 函数来绑定点击事件，当用户点击某一行时，就会触发这个事件。在事件处理函数中，我们使用 addClass() 函数来为被选中的行添加 active 类名，这个类名是 Semantic UI 提供的用于高亮显示选中行的类名。同时，我们使用 siblings() 函数来获取到同级的所有行，然后使用 removeClass() 函数来移除这些行的 active 类名，以确保只有当前被选中的行拥有 active 类名。

最后，我们需要在 CSS 样式文件中添加 active 类名的样式。这里我们使用 Semantic UI 提供的默认样式即可。代码如下：

.ui.table tbody tr.active {
  background-color: #85d1ff !important;
}

在上面的代码中，我们使用了 .ui.table tbody tr.active 选择器来选中拥有 active 类名的行，并使用 background-color 属性来设置其背景颜色。

总结

通过以上的步骤，我们就可以实现表格的可选行变化功能了。在这个过程中，我们充分运用了语义 UI 的思想，以语义化的标签和结构化的类名来实现样式和交互的编写方式。这样可以让我们写出更加易于阅读和维护的代码，提升开发效率和代码质量。