本文介绍如何修改 html 和 javascript 代码，使表格仅在用户点击第一行（表头）时触发内容行的显示/隐藏切换，而其他行点击无响应，避免误操作导致意外折叠。
本文介绍如何修改 html 和 javascript 代码，使表格仅在用户点击第一行（表头）时触发内容行的显示/隐藏切换，而其他行点击无响应，避免误操作导致意外折叠。
在实际开发中，常需实现“点击表头展开/收起数据行”的交互效果。原始代码将 onclick 绑定在
| Fruits | Value |
|---|---|
| Apple | 10 |
| Orange | 20 |
? 注意：移除了
的 onclick，也不预先设置 style="display:none" —— 初始状态应为可见，折叠逻辑完全交由 JS 控制，便于维护和扩展。
✅ 稳健的 JavaScript 函数（兼容初始状态）
function expandCollapseTable() { const table = document.getElementById("customers2"); const rows = table.rows; // 从第1行开始（跳过首行表头），逐行切换 display 状态 for (let i = 1; i <p>该函数具备以下优势：</p>
- 使用 const 和严格相等（===）提升健壮性；
- 不依赖全局变量或冗余 DOM 查询（如重复调用 getElementById）；
- 自动适配任意数量的数据行，无需硬编码行数；
- 支持多次点击，实现「展开 ↔ 折叠」双向切换。
✅ 可选：添加基础样式增强可读性
table, tr, th, td { border: 1px solid #ccc; padding: 8px; } .gradient { background: linear-gradient(135deg, #4a90e2, #6a5acd); color: white; cursor: pointer; }为表头添加渐变背景和手型光标，直观提示其可交互性。
⚠️ 注意事项
- 不要在数据行上添加 onclick，否则会干扰主逻辑；
- 若需支持键盘访问（如 Enter 键触发），建议改用 addEventListener 并添加 tabindex="0" 和按键监听；
- 如表格动态渲染（如 AJAX 加载），请确保 expandCollapseTable() 在 DOM 就绪后执行，或使用事件委托；
- display: ''（空字符串）会恢复元素默认显示值（如
默认为 table-row），比硬写 'table-row' 更安全。 通过以上改造，即可精准实现「仅点首行，控制全表数据行显隐」的用户体验，代码简洁、语义清晰、易于复用。
