正文

掌握Bootstrap：轻松控制数据表格中个体与年份筛选技巧

/0 浏览量
0628

在Web开发中，数据表格是一个常见的组件，用于展示大量数据。Bootstrap是一个非常流行的前端框架，它提供了丰富的工具来帮助我们快速构建响应式、美观的网页。本文将介绍如何使用Bootstrap来控制数据表格中的个体与年份筛选技巧，让你轻松管理复杂的数据。

一、准备工作

在开始之前，请确保你已经安装了Bootstrap。你可以从Bootstrap官网下载最新版本的Bootstrap，并将其包含在你的项目中。

二、创建数据表格

首先，我们需要创建一个基本的数据表格。以下是一个简单的HTML代码示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>年份</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>2020</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>2019</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

三、添加筛选功能

为了实现对数据表格的筛选，我们需要添加两个筛选组件：一个用于筛选个体，另一个用于筛选年份。

1. 筛选个体

首先，为姓名列添加一个下拉菜单，用于筛选个体。以下是HTML代码：

<select class="form-control" id="nameFilter">
  <option value="">请选择姓名</option>
  <option value="张三">张三</option>
  <option value="李四">李四</option>
  <!-- 更多姓名选项 -->
</select>

然后，使用JavaScript为下拉菜单添加事件监听器，根据选中的姓名筛选表格数据：

document.getElementById('nameFilter').addEventListener('change', function() {
  var filter = this.value;
  var rows = document.querySelectorAll('.table tbody tr');
  for (var i = 0; i < rows.length; i++) {
    var nameCell = rows[i].querySelector('.name');
    if (nameCell.textContent !== filter) {
      rows[i].style.display = 'none';
    } else {
      rows[i].style.display = '';
    }
  }
});

2. 筛选年份

接下来，为年份列添加一个下拉菜单，用于筛选年份。以下是HTML代码：

<select class="form-control" id="yearFilter">
  <option value="">请选择年份</option>
  <option value="2020">2020</option>
  <option value="2019">2019</option>
  <!-- 更多年份选项 -->
</select>

然后，使用JavaScript为下拉菜单添加事件监听器，根据选中的年份筛选表格数据：

document.getElementById('yearFilter').addEventListener('change', function() {
  var filter = this.value;
  var rows = document.querySelectorAll('.table tbody tr');
  for (var i = 0; i < rows.length; i++) {
    var yearCell = rows[i].querySelector('.year');
    if (yearCell.textContent !== filter) {
      rows[i].style.display = 'none';
    } else {
      rows[i].style.display = '';
    }
  }
});

3. 结合筛选

为了同时筛选个体和年份，我们需要修改上述JavaScript代码，使其同时考虑两个筛选条件：

document.getElementById('nameFilter').addEventListener('change', function() {
  var nameFilter = this.value;
  var yearFilter = document.getElementById('yearFilter').value;
  var rows = document.querySelectorAll('.table tbody tr');
  for (var i = 0; i < rows.length; i++) {
    var nameCell = rows[i].querySelector('.name');
    var yearCell = rows[i].querySelector('.year');
    if (nameCell.textContent !== nameFilter || yearCell.textContent !== yearFilter) {
      rows[i].style.display = 'none';
    } else {
      rows[i].style.display = '';
    }
  }
});

四、总结

通过以上步骤，我们成功实现了使用Bootstrap控制数据表格中个体与年份筛选的功能。在实际项目中，你可以根据需求调整筛选逻辑和样式。希望本文能帮助你更好地掌握Bootstrap，提升你的Web开发技能。

-- 展开阅读全文 --