本文介绍一种符合 Web 标准的、可扩展的表格行批量显隐方案：使用 CSS 类选择器替代重复 ID，结合 classList.toggle() 实现多行同步切换，避免内联事件与样式，提升代码可维护性与语义清晰度。
本文介绍一种符合 web 标准的、可扩展的表格行批量显隐方案：使用 css 类选择器替代重复 id，结合 `classlist.toggle()` 实现多行同步切换，避免内联事件与样式，提升代码可维护性与语义清晰度。
在构建产品对比表等交互式表格时，常需通过一个按钮统一控制多行附加规格信息（如技术参数、兼容性详情）的展开与收起。若沿用 id 选择器（如 document.getElementById），不仅违反 HTML 规范（ID 必须唯一），更无法批量操作——这是初学者易踩的典型陷阱。
正确做法是语义化标记 + 分离关注点：用 class 标识目标行，用纯 CSS 控制显隐状态，用现代 JavaScript 绑定事件并批量处理。以下是完整实现方案：
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 推荐实现（结构清晰、可维护性强）
HTML 结构（语义化标记）
为所有待控制的 <tr> 添加 hideable 类，并默认加上 hidden 类以初始隐藏：
<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>Specification A</td>
<td>Value A</td>
</tr>
<tr class="hideable hidden">
<td>Specification B</td>
<td>Value B</td>
</tr>
</tbody>
</table>
</div>CSS 样式（声明式状态管理）
利用 CSS 类组合精准控制显示逻辑，无需 JS 操控 style.display：
/* 默认显示 hideable 行 */
.hideable {
display: table-row;
}
/* 隐藏时设为 none —— 注意：table-row 是表格行的正确 display 值 */
.hideable.hidden {
display: none;
}
/* 可选：基础表格美化 */
table {
border-collapse: collapse;
border: 1px solid #ccc;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
}JavaScript 逻辑（简洁健壮）
使用 addEventListener 替代内联 onclick，利用 querySelectorAll 批量获取元素，并用 forEach + classList.toggle() 实现状态翻转：
document.getElementById('toggle')
?.addEventListener('click', () => {
document.querySelectorAll('.hideable')
.forEach(row => row.classList.toggle('hidden'));
});? 关键优势说明：
- ✅ 合法合规：规避重复 ID，符合 HTML5 规范；
- ✅ 高可扩展性：新增 <tr class="hideable hidden"> 即自动纳入控制范围，无需修改 JS；
- ✅ 样式解耦：显隐逻辑完全由 CSS 定义，JS 仅负责状态切换，便于主题定制或动画增强（如配合 transition 实现淡入淡出）；
- ✅ 健壮容错：使用可选链 ?. 防止按钮不存在时报错。
⚠️ 注意事项
- 不要使用 display: ''（空字符串）重置样式——它会回退到浏览器默认值，而表格行默认不是 table-row，可能导致布局错乱；始终显式设置 table-row 或交由 CSS 管理。
- 若需支持旧版 IE（<12），需替换 classList.toggle() 为兼容写法（如 className.includes('hidden') ? ... : ...），但现代项目强烈建议放弃 IE 支持以简化代码。
- 如需“展开全部/收起全部”以外的精细控制（如按组切换），可扩展为 data-group="specs" + querySelectorAll('[data-group="specs"]')，保持架构灵活性。
此方案已广泛应用于电商比价页、文档参数表等真实场景，兼顾性能、可读性与长期可维护性——真正把“一次点击，多行响应”做得既简单又专业。
