如何在jQuery表格过滤功能中实时显示可见行数？

我之前看到jmpman提过完全相同的问题，现在自己也遇到了一样的需求——想基于Brian Thopset的答案实现表格过滤时实时显示当前可见行数，但模仿适配后没能成功。试过Stack Overflow及其他论坛的类似解决方案，都没效果。我的核心需求是在表格下方添加段落，实时显示“当前搜索条件下找到x条记录”。

以下是我的完整代码：

原JavaScript代码 #

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

原HTML代码 #

<!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>

<input id="myInput" type="search" placeholder="Filter Criteria..">

<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 = x</p>

</html>

解决方案 #

要实现实时统计可见行数，只需要在过滤逻辑执行后，统计#myTable中可见的<tr>元素数量，然后更新段落内容即可。修改后的JavaScript代码如下：

$(document).ready(function() {
  // 初始化时先统计一次行数
  updateRowCount();
  
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    // 过滤完成后更新行数统计
    updateRowCount();
  });
  
  // 封装统计行数的函数
  function updateRowCount() {
    // 统计可见的tr数量（:visible选择器）
    var visibleRows = $("#myTable tr:visible").length;
    // 更新段落文本
    $("p").text(`当前搜索条件下找到${visibleRows}条记录`);
  }
});

同时，把HTML中的<p>Number of rows = x</p>改成<p>当前搜索条件下找到5条记录</p>，确保页面初始化时显示正确的行数。

关键说明 #

• 使用jQuery的:visible选择器直接筛选出可见的表格行
• 将统计逻辑封装成函数，初始化和每次过滤后都调用，确保数据实时更新
• 直接修改目标段落的文本内容，实现实时展示

内容的提问来源于stack exchange，提问作者Ray