如何使用JavaScript统计筛选后表格展示的行数

实现思路 #

筛选后被隐藏的表格行通常会被设置display: none样式，只要遍历所有行过滤掉隐藏项，统计剩余可见行的数量即可。

代码实现 #

你可以直接复用原有逻辑，调整统计规则：

function countVisibleRows() {
  var table = document.getElementById("userTbl");
  var visibleCount = 0;
  // 遍历表格所有行
  for (var i = 0; i < table.rows.length; i++) {
    var currentRow = table.rows[i];
    // 获取行实际渲染的显示状态，过滤隐藏行
    if (window.getComputedStyle(currentRow).display !== 'none') {
      visibleCount++;
    }
  }
  document.getElementById("demo").innerHTML = "当前共展示 " + visibleCount + " 行数据";
}

可选优化 #

如果你的筛选逻辑是给隐藏行统一加了自定义隐藏类（比如.hide、.filter-hidden），可以用更简洁的写法：

function countVisibleRows() {
  var table = document.getElementById("userTbl");
  // 直接统计没有隐藏类的行数量即可
  var visibleRows = table.querySelectorAll('tr:not(.filter-hidden)');
  document.getElementById("demo").innerHTML = "当前共展示 " + visibleRows.length + " 行数据";
}

如果不需要统计表头行，只需要把遍历范围调整为table.tBodies[0].rows，即可跳过<thead>里的表头行统计。

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