基于jQuery实现表格内容的筛选功能

基于jQuery实现表格内容的筛选功能需要经过以下步骤：

步骤一：添加jQuery库到HTML文件中

在head标签中添加jQuery库的引用，例如：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

步骤二：创建表格结构

创建一个表格结构，并在表格中添加需要筛选的内容。示例如下：

<table id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

步骤三：编写筛选函数

使用jQuery编写一个筛选函数，其功能是根据用户输入的关键词，来筛选表格内容。示例如下：

$("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

该函数中，关键词输入框的id为searchInput，表格的id为myTable。当用户在输入框中输入关键词时，该函数将根据关键词筛选表格中的内容，并在页面上更新筛选结果。

步骤四：添加筛选框

在HTML文件中添加一个输入框，作为用户输入关键词的页面元素。示例如下：

<input type="text" id="searchInput" placeholder="Type to search...">

步骤五：调用筛选函数

最后一步是在页面加载时调用筛选函数，用于初始化表格的筛选效果。示例如下：

$(document).ready(function(){
    $("#searchInput").keyup();
});

这样，基于jQuery实现表格内容的筛选功能就已经完成了。

示例说明

下面是两个示例，展示了基于jQuery实现表格筛选功能的应用场景。

示例1：筛选商品列表

在一个在线商城中，用户需要根据关键词筛选出自己需要的商品。可以通过基于jQuery实现表格筛选功能来解决这个问题。

<table id="productTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>iPhone X</td>
      <td>6800</td>
      <td>Phone</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Macbook Air</td>
      <td>7899</td>
      <td>Computer</td>
    </tr>
  </tbody>
</table>

<input type="text" id="productSearchInput" placeholder="Type to search...">

<script>
$("#productSearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#productTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

$(document).ready(function(){
    $("#productSearchInput").keyup();
});
</script>

示例2：筛选人员信息列表

在一个企业内部管理系统中，管理员需要根据特定的条件筛选人员信息列表。同样可以利用基于jQuery实现表格筛选功能来实现这个功能。

<table id="employeeTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>Sales</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>30</td>
      <td>Marketing</td>
    </tr>
  </tbody>
</table>

<input type="text" id="employeeSearchInput" placeholder="Type to search...">

<script>
$("#employeeSearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#employeeTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

$(document).ready(function(){
    $("#employeeSearchInput").keyup();
});
</script>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现表格内容的筛选功能 - Python技术站