本文介绍如何使用 jquery 在用户输入搜索关键词时，动态过滤 html 表格行，并实时显示当前匹配的可见行数量，适用于带搜索功能的数据表格场景。

本文介绍如何使用 jquery 在用户输入搜索关键词时，动态过滤 html 表格行，并实时显示当前匹配的可见行数量，适用于带搜索功能的数据表格场景。

在构建可搜索的 HTML 表格时，仅隐藏/显示行还不够——用户往往需要即时反馈：当前查到了多少条结果？要实现这一功能，关键在于分离“筛选逻辑”与“计数逻辑”：先统一隐藏所有行，再用 .filter() 精确选出匹配项，最后通过 .length 获取数量并更新 DOM。

以下是一个完整、可靠且易于维护的实现方案：

✅ 核心思路

1. 统一隐藏所有 <tr>（避免残留可见行干扰计数）； <li> <strong>使用 <code>.filter() 返回匹配的 jQuery 对象（注意：必须 return 布尔值，而非直接调用 .toggle()）；
2. 对筛选结果调用 .show() 并立即获取 .length；
3. 将数字写入指定元素（如 <span id="count"></span>）。

✅ 完整代码示例

  <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


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
<script> $(document).ready(function() { $("#myInput").on("input", function() { // ✅ 推荐用 'input' 替代 'keyup'，兼容粘贴/清除等操作 const value = $(this).val().trim().toLowerCase(); // 若搜索框为空，显示全部行并重置计数 if (value === "") { $("#myTable tr").show(); $("#count").text($("#myTable tr").length); return; } // 先隐藏所有行 $("#myTable tr").hide(); // 筛选包含关键词的行（全文本模糊匹配） const matchedRows = $("#myTable tr").filter(function() { return $(this).text().toLowerCase().includes(value); }); // 显示匹配行，并更新计数 matchedRows.show(); $("#count").text(matchedRows.length); }); }); </script>

⚠️ 注意事项

• .filter() 必须 return 布尔值：原问题中直接在回调里调用 .toggle() 是无效的，因为 toggle() 不返回布尔值，导致 .filter() 无法正确构建结果集。
• 使用 input 事件优于 keyup：可捕获粘贴（Ctrl+V）、剪切、清空（X 按钮）等操作，提升用户体验。
• .trim().toLowerCase() 防止空格干扰：避免因用户误输空格导致无结果。
• 空搜索时恢复全部行：增强健壮性，避免清空输入后仍显示 0 条。
• 性能提示：对于超大表格（>1000 行），建议添加防抖（debounce）或改用虚拟滚动方案。

✅ 总结

该方案简洁、语义清晰、零依赖，仅需为计数区域添加一个带 id="count" 的元素，即可实现专业级的实时行数反馈。它不仅解决了“显示多少条”的显性需求，更通过结构化逻辑为后续扩展（如“无结果提示”、“分页集成”）打下坚实基础。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！