）的显示与隐藏
" />
本文介绍一种符合 html 规范、结构清晰且易于维护的方法：使用 css 类（而非重复 id）批量控制多个表格行的显隐状态，并通过事件委托实现单按钮统一切换。
本文介绍一种符合 html 规范、结构清晰且易于维护的方法：使用 css 类（而非重复 id）批量控制多个表格行的显隐状态，并通过事件委托实现单按钮统一切换。
在构建产品对比表等需要动态展开/收起详细规格的场景中，常见误区是为多个
✅ 推荐实现方案
1. HTML 结构：语义清晰，无内联脚本
为需统一控制的行添加 class="hideable hidden" —— hideable 标识可操作范围，hidden 表示初始隐藏状态；按钮使用唯一 id="toggle" 便于精准绑定：
<button type="button" id="toggle">Show/Hide ▼</button>
<h2>Table</h2>
<div>
<table><tbody>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr class="hideable hidden">
<td>Show/Hide</td>
<td>Info</td>
</tr>
<tr class="hideable hidden">
<td>Show/Hide</td>
<td>Info</td>
</tr>
</tbody></table>
</div>
2. CSS 样式：声明式控制显示状态
避免使用内联 style 或 JS 直接操作 display，而是通过类名切换触发样式变化，提升可维护性与可测试性：
table {
border-collapse: collapse;
border: 1px solid #999;
}
th, td {
padding: 6px 12px;
border: 1px solid #ccc;
}
.hideable {
display: table-row; /* 显式声明默认显示行为 */
}
.hideable.hidden {
display: none;
}
? 提示：display: table-row 是
的原生显示值，比空字符串或 block 更语义准确，避免渲染异常。 3. JavaScript 逻辑：简洁、健壮、无副作用
使用 addEventListener 替代内联 onclick，利用 querySelectorAll 批量获取目标元素，并通过 classList.toggle() 实现状态翻转：
document.getElementById('toggle') ?.addEventListener('click', () => { document.querySelectorAll('.hideable') .forEach(row => row.classList.toggle('hidden')); });该写法具备以下优势：
- ✅ 安全容错：?. 可选链确保 DOM 元素不存在时不报错；
- ✅ 批量处理：forEach 遍历所有 .hideable 行，逐个切换 hidden 类；
- ✅ 状态自洽：无论初始是否隐藏，点击即反向切换，无需手动判断当前 display 值；
- ✅ 零侵入：不修改 HTML 内联属性，样式与行为完全解耦。
⚠️ 注意事项
- 严禁复用 id：HTML 中 id 必须全局唯一，重复将导致不可预测的 DOM 查询结果；
- 避免直接操作 style.display：易与 CSS 优先级冲突，且难以维护响应式或多状态逻辑；
- 扩展性建议：如需支持“全部展开/收起”+“逐行控制”，可为每行添加独立 toggle 按钮，并复用同一套 class 机制。
此方案兼顾语义化、可访问性与工程实践，适用于任何需批量控制表格行显隐的交互场景。
