用jquery对表格内容筛选

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

在网页设计和开发的过程中，我们经常会遇到需要对表格内容进行筛选的需求，在一个商品列表页面，用户可能想要筛选出价格在某个区间内的商品，或者在员工信息表中筛选出特定部门的员工，这时候，使用jQuery来实现表格内容的筛选功能就显得尤为重要了。

我们要明白jQuery是一个快速、小巧、功能丰富的JavaScript库，它使得HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，在处理表格数据筛选时，jQuery提供了强大的选择器和事件绑定功能，可以帮助我们轻松实现筛选功能。

我将详细介绍如何使用jQuery来对表格内容进行筛选。

准备HTML结构

我们需要有一个基本的HTML表格结构。

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>部门</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>技术部</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>市场部</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>
<input type="text" id="filter-input" placeholder="输入姓名筛选">

在这个例子中，我们有一个表格data-table，以及一个文本输入框filter-input用于输入筛选条件。

引入jQuery

在HTML文件中，我们需要引入jQuery库，可以通过CDN链接直接引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

编写筛选逻辑

我们将编写jQuery代码来实现筛选功能，当用户在输入框中输入文本时，我们希望表格中不匹配该文本的行被隐藏。

$(document).ready(function() {
  $("#filter-input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#data-table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

这段代码做了以下几件事情：

- 当文档加载完成后，绑定keyup事件到输入框filter-input。

- 每次用户输入时，获取输入框的值并转换为小写。

- 对表格中的每一行进行筛选，如果行中的文本包含输入框中的值，则显示该行，否则隐藏。

扩展筛选功能

上面的代码示例仅对姓名进行了筛选，如果我们想要对年龄或部门也进行筛选，可以稍微修改一下代码，增加更多的筛选条件：

$("#filter-input").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#data-table tr").filter(function() {
    var text = $(this).text().toLowerCase();
    return text.indexOf(value) > -1;
  }).show();
  $("#data-table tr").filter(function() {
    var text = $(this).text().toLowerCase();
    return text.indexOf(value) === -1;
  }).hide();
});