a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html>
本文介绍如何使用 jquery 在用户输入搜索关键词时，动态隐藏不匹配的表格行，并实时更新显示当前可见行的数量，适用于带搜索功能的数据表格场景。
本文介绍如何使用 jquery 在用户输入搜索关键词时，动态隐藏不匹配的表格行，并实时更新显示当前可见行的数量，适用于带搜索功能的数据表格场景。
在构建交互式 HTML 表格时，常需添加搜索过滤功能，并同步反馈当前匹配结果数量（例如“共找到 3 条记录”）。原始代码中直接使用 .toggle() 难以准确统计可见行数，因其依赖于上一次状态，易导致计数错误或 DOM 状态不一致。
正确做法是：先统一隐藏所有行，再通过 filter() 精确筛选出应显示的行，最后调用 .show() 并利用其返回的 jQuery 对象长度获取实时计数。关键在于 filter() 的回调函数必须显式 return 布尔值（如 $(this).text().toLowerCase().includes(value)），而非仅执行 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
✅ 关键要点说明：
- 使用
.trim().toLowerCase()防止空格干扰和大小写误判； - 空搜索时恢复全部显示，提升用户体验；
-
作为计数容器，语义清晰且便于样式控制； -
filter()返回的是新 jQuery 对象，.length即为当前匹配行数，稳定可靠； - 避免对
行误操作（本例中未包含在#myTable内，若需保留表头，请确保#myTable仅包裹，或单独处理）。该方案轻量、兼容性强（jQuery 3.x+），无需额外插件，适合快速集成到现有表格系统中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
