本文介绍如何使用 jquery 在用户输入搜索关键词时，动态隐藏不匹配的表格行，并实时更新显示当前可见行的数量，适用于带搜索功能的数据表格场景。
本文介绍如何使用 jquery 在用户输入搜索关键词时，动态隐藏不匹配的表格行，并实时更新显示当前可见行的数量，适用于带搜索功能的数据表格场景。
在构建交互式 HTML 表格时，常需添加搜索过滤功能，并同步反馈当前匹配结果数量（例如“共找到 3 条记录”）。原始代码中直接使用 .toggle() 难以准确统计可见行数，因其依赖于上一次状态，易导致计数错误或 DOM 状态不一致。
正确做法是：先统一隐藏所有行，再通过 filter() 精确筛选出应显示的行，最后调用 .show() 并利用其返回的 jQuery 对象长度获取实时计数。关键在于 filter() 的回调函数必须显式 return 布尔值（如 $(this).text().toLowerCase().includes(value)），而非仅执行 toggle()。
以下是完整、可直接运行的实现方案：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<input id="myInput" type="search" placeholder="Filter Criteria..">
<table border="1" class="table">
<thead>
<tr>
<th>Item</th>
<th>Code</th>
<th>Min</th>
<th>Reorder</th>
<th>Max</th>
</tr>
</thead>
<tbody id="myTable">
<tr><td>Cars</td><td>20426</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Planes</td><td>20427</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Bikes</td><td>56890</td><td>5</td><td>8</td><td>15</td></tr>
<tr><td>Boats</td><td>28772</td><td>5</td><td>8</td><td>15</td></tr>
<tr><td>Helicopters</td><td>28960</td><td>5</td><td>8</td><td>20</td></tr>
</tbody>
</table>
<p>Number of rows = <span id="count">5</span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<script>
$(document).ready(function() {
$("#myInput").on("keyup", function() {
const value = $(this).val().trim().toLowerCase();
// 若搜索框为空，显示全部行
if (value === "") {
$("#myTable tr").show();
$("#count").text($("#myTable tr").length);
return;
}
// 先隐藏所有行
$("#myTable tr").hide();
// 筛选匹配的行（注意：return 必须存在）
const matchedRows = $("#myTable tr").filter(function() {
return $(this).text().toLowerCase().includes(value);
});
// 显示匹配行并更新计数
matchedRows.show();
$("#count").text(matchedRows.length);
});
});
</script>
</body>
</html>✅ 关键要点说明：
- 使用
.trim().toLowerCase()防止空格干扰和大小写误判； - 空搜索时恢复全部显示，提升用户体验；
-
<span id="count"></span>作为计数容器，语义清晰且便于样式控制； -
filter()返回的是新 jQuery 对象，.length即为当前匹配行数，稳定可靠； - 避免对
<thead> 行误操作（本例中 <code><thead> 未包含在 <code>#myTable内，若需保留表头，请确保#myTable仅包裹<tbody>，或单独处理 <code><thead>）。<p>该方案轻量、兼容性强（jQuery 3.x+），无需额外插件，适合快速集成到现有表格系统中。</p> </thead>
