如何监听HTML表格可见行数变化并触发回调更新文本框？

核心思路 #

要实现自动更新，关键是在触发表格行显示/隐藏的操作后调用统计函数，或者监听DOM变化自动触发统计，下面提供两种实用方案：

方案一：在搜索操作中直接调用统计函数（推荐） #

这是最直接高效的方式，因为搜索是导致行显示变化的根源，每次过滤完行后立即执行统计：

首先定义基础的统计函数：

function countFunction() {
  // 替换成你的表格ID，排除表头行（根据实际结构调整）
  const tableRows = document.querySelectorAll('#target-table tr:not(:first-child)');
  let visibleCount = 0;
  
  tableRows.forEach(row => {
    // 判断行是否可见（兼容display和hidden属性）
    if (row.style.display !== 'none' && !row.hidden) {
      visibleCount++;
    }
  });
  
  document.getElementById('textbox').value = `可见行数：${visibleCount}`;
}

然后在搜索逻辑中添加统计调用（以实时搜索为例）：

<!-- 假设你的搜索输入框 -->
<input type="text" id="search-input" placeholder="输入关键词搜索...">

<script>
document.getElementById('search-input').addEventListener('input', function() {
  const searchKeyword = this.value.trim().toLowerCase();
  const tableRows = document.querySelectorAll('#target-table tr:not(:first-child)');
  
  // 搜索过滤逻辑
  tableRows.forEach(row => {
    const rowContent = row.textContent.toLowerCase();
    row.style.display = rowContent.includes(searchKeyword) ? '' : 'none';
  });
  
  // 过滤完成后立即更新统计
  countFunction();
});

// 页面加载时先执行一次初始统计
countFunction();
</script>

方案二：用MutationObserver监听DOM变化（通用场景） #

如果不清楚所有可能触发行显示变化的操作，可通过DOM观察者监听行的显示属性变化，自动触发统计：

// 替换成你的表格ID
const targetTable = document.getElementById('target-table');

// 配置观察者：监听行的style和hidden属性变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['style', 'hidden'],
  subtree: true // 监听表格的所有子元素（行）
};

// 创建观察者实例
const displayObserver = new MutationObserver(() => {
  // 行显示状态变化时更新统计
  countFunction();
});

// 启动观察者
displayObserver.observe(targetTable, observerConfig);

// 初始统计
countFunction();

注意：如果页面中DOM变化频繁，可给countFunction添加防抖逻辑，避免多次重复执行：

let debounceTimer;
function debouncedCount() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(countFunction, 100); // 100ms延迟，可调整
}
// 把观察者中的countFunction替换成debouncedCount

补充说明 #

• 请将代码中的#target-table替换成你实际的表格ID，表头行的排除逻辑也可根据表格结构调整（比如如果表头用<thead>，可改为#target-table tbody tr）。
• 原有的results按钮仍可保留，作为手动触发统计的备用入口。

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