jquery 过滤表格

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在处理表格时，jQuery 提供了多种方法来过滤和显示表格中的数据。

基础概念

过滤表格是指根据特定条件显示或隐藏表格中的行。这通常涉及到选择特定的表格行（<tr>）并根据某些标准（如文本内容、类名等）来决定是否显示这些行。

类型

文本过滤：根据单元格中的文本内容进行过滤。
属性过滤：根据行的属性（如类名、ID 等）进行过滤。
自定义过滤：使用自定义函数来决定哪些行应该显示。

应用场景

搜索框过滤：用户输入关键词，表格实时显示匹配的行。
分类筛选：通过下拉菜单选择不同的类别，只显示相应类别的行。
动态数据更新：当表格数据动态变化时，保持过滤条件的实时性。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 根据输入框中的文本过滤表格行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Table Filter</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search for names..">

<table id="myTable">
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>John</td><td>25</td></tr>
    <tr><td>Anna</td><td>30</td></tr>
    <tr><td>Matthew</td><td>28</td></tr>
    <tr><td>Emily</td><td>22</td></tr>
</table>

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

</body>
</html>