本文介绍使用 MutationObserver 监听表格结构与属性变化，自动计算并更新当前可见的 行数，避免手动调用计数函数，实现真正的响应式行数统计。 本文介绍使用 MutationObserver 监听表格结构与属性变化，自动计算并更新当前可见的 `` 行数，避免手动调用计数函数，实现真正的响应式行数统计。在前端开发中，当表格通过搜索、筛选或动态增删行等方式改变可见状态时，若仍依赖按钮点击（如 onclick="countFunction()"）来刷新行数显示，会导致交互滞后、体验割裂。更优方案是主动监听 DOM 变化，让行数统计自动响应。核心思路是：不依赖 CSS display 或 visibility 样式值（MutationObserver 无法监听样式变更），而是将可见性状态显式映射为 HTML 属性（如 visibility="hidden"），再通过 MutationObserver 监听该属性及子节点变动。以下为完整可运行实现：rows: row 1 row 2 Add Row Toggle First Row [visibility="hidden"] { display: none; } const tbody = document.querySelector("tbody"); const rowCountSpan = document.querySelector("#rowcount"); function updateRowCount() { const visibleRows = Array.from(tbody.querySelectorAll("tr")) .filter(row => row.getAttribute("visibility") !== "hidden"); rowCountSpan.textContent = visibleRows.length; } // 创建 MutationObserver 实例，监听 tbody 下的结构与属性变化 const observer = new MutationObserver(() => updateRowCount()); observer.observe(tbody, { subtree: true, // 深度监听所有后代节点 childList: true, // 监听新增/移除子元素（如 tr 插入或删除） attributes: true, // 监听属性变更（如 visibility 属性增删或修改） attributeFilter: ["visibility"] // 仅关注 visibility 属性，提升性能 }); // 初始化显示 updateRowCount(); // 辅助操作函数（供测试用） function addRow() { const row = document.createElement("tr"); const cell = document.createElement("td"); cell.textContent = `row ${tbody.children.length + 1}`; row.appendChild(cell); tbody.appendChild(row); } function toggleFirstRow() { const firstRow = tbody.querySelector("tr"); if (firstRow) { if (firstRow.getAttribute("visibility") === "hidden") { firstRow.removeAttribute("visibility"); } else { firstRow.setAttribute("visibility", "hidden"); } } } ✅ 关键要点说明： 使用 visibility="hidden"（而非内联样式）作为语义化可见性标记，确保可被 MutationObserver 捕获； attributeFilter: ["visibility"] 是重要优化，避免无谓触发，提升性能； Array.from(...).filter(...) 比 Set 更简洁安全，避免因 DOM 节点动态变化导致迭代异常； 支持动态插入、删除 ，以及属性切换，全部自动触发更新； 若业务中已用 class="hidden" 控制显示，建议统一改用 data-visible="false" 等自定义属性，并同步修改过滤逻辑。⚠️ 注意事项： 不要直接监听 display: none 或 visibility: hidden 的 CSS 变更——浏览器不会触发 DOM mutation 事件； 避免在 updateRowCount() 中执行复杂计算或重排操作，保持轻量以保障响应性能； 若表格含分页或虚拟滚动，需结合业务逻辑判断“可见”是否指 DOM 存在，还是视口内渲染，本方案适用于全量 DOM 管理场景。通过该方案，你将告别手动刷新，真正实现「行数变化，即刻反映」的现代交互体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
