本文介绍使用 MutationObserver 监听表格结构与属性变化，自动计算并更新当前可见的 行数，避免手动调用计数函数，实现真正的响应式行数统计。
本文介绍使用 mutationobserver 监听表格结构与属性变化，自动计算并更新当前可见的 `
在前端开发中，当表格通过搜索、筛选或动态增删行等方式改变可见状态时，若仍依赖按钮点击（如 onclick="countFunction()"）来刷新行数显示，会导致交互滞后、体验割裂。更优方案是主动监听 DOM 变化，让行数统计自动响应。
核心思路是：不依赖 CSS display 或 visibility 样式值（MutationObserver 无法监听样式变更），而是将可见性状态显式映射为 HTML 属性（如 visibility="hidden"），再通过 MutationObserver 监听该属性及子节点变动。
以下为完整可运行实现：
<p>rows: <span id="rowcount"></span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" 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>
<table>
<tbody>
<tr visibility="hidden"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
</tbody>
</table>
<button type="button" class="rst" onclick="addRow()">Add Row</button>
<button type="button" class="rst" onclick="toggleFirstRow()">Toggle First Row</button>
<style>
[visibility="hidden"] { display: none; }
</style>
<script>
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");
}
}
}
</script>✅ 关键要点说明：
- 使用
visibility="hidden"（而非内联样式）作为语义化可见性标记，确保可被MutationObserver捕获； -
attributeFilter: ["visibility"]是重要优化，避免无谓触发，提升性能； -
Array.from(...).filter(...)比Set更简洁安全，避免因 DOM 节点动态变化导致迭代异常； - 支持动态插入、删除
<tr>，以及属性切换，全部自动触发更新； <li>若业务中已用 <code>class="hidden"控制显示，建议统一改用data-visible="false"等自定义属性，并同步修改过滤逻辑。 - 不要直接监听
display: none或visibility: hidden的 CSS 变更——浏览器不会触发 DOM mutation 事件； - 避免在
updateRowCount()中执行复杂计算或重排操作，保持轻量以保障响应性能； - 若表格含分页或虚拟滚动，需结合业务逻辑判断“可见”是否指 DOM 存在，还是视口内渲染，本方案适用于全量 DOM 管理场景。
⚠️ 注意事项：
通过该方案，你将告别手动刷新，真正实现「行数变化，即刻反映」的现代交互体验。
