本文介绍如何在基于 jQuery 的表格搜索功能中，动态显示当前匹配的行数，通过 filter() 获取可见行集合并更新 DOM 中的计数文本。
本文介绍如何在基于 jquery 的表格搜索功能中，动态显示当前匹配的行数，通过 `filter()` 获取可见行集合并更新 dom 中的计数文本。
在实现 HTML 表格的客户端搜索过滤时，仅隐藏/显示行是不够的——用户通常需要即时反馈：当前有多少条数据匹配搜索条件。本教程提供一个简洁、可靠且可复用的 jQuery 解决方案。
核心思路是：先统一隐藏所有行，再用 .filter() 精确筛选出应显示的行，最后利用其返回的 jQuery 对象长度（.length）更新计数显示。相比原代码中直接 .toggle() 的方式，该方法更可控、逻辑更清晰，也避免了因多次触发导致的状态混乱。
以下是完整可运行的实现代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Row count Test</title><input id="myInput" type="search" placeholder="Filter Criteria..">
| Item | Code | Min | Reorder | Max |
|---|---|---|---|---|
| Cars | 20426 | 1 | 2 | 3 |
| Planes | 20427 | 1 | 2 | 3 |
| Bikes | 56890 | 5 | 8 | 15 |
| Boats | 28772 | 5 | 8 | 15 |
| Helicopters | 28960 | 5 | 8 | 20 |
Number of rows = 5
✅ 关键要点说明：
-
<span id="count"></span>是计数显示的容器，初始值设为5（总行数），便于首次加载时有合理默认； - 使用
.includes(value)替代indexOf(...) > -1，语义更清晰、兼容性良好（IE9+）； - 必须先
.hide()全部再.show()匹配项，否则.filter()可能受上一次显示状态干扰； -
filter()回调函数必须显式return true/false—— 这是 jQuery 正确构建结果集的前提； - 若需支持空搜索（显示全部），当前逻辑天然兼容：当
value === ""时，所有行文本均包含空字符串，shown.length即为总行数。
? 进阶提示：
如需提升用户体验，可添加防抖（debounce）、区分大小写开关、或高亮关键词等功能；若表格数据量大（>1000 行），建议改用虚拟滚动或服务端分页，避免频繁 DOM 操作影响性能。
此方案轻量、稳定、易于集成，适用于各类基于 jQuery 的管理后台或数据看板场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
