本文介绍如何修改 html 和 javascript，使表格仅在用户点击第一行（表头）时触发所有数据行的显示/隐藏切换，而其他行点击无响应，避免误操作导致意外折叠。
本文介绍如何修改 html 和 javascript，使表格仅在用户点击第一行（表头）时触发所有数据行的显示/隐藏切换，而其他行点击无响应，避免误操作导致意外折叠。
在实际开发中，常需实现“点击表头切换数据行显隐”的交互效果。原始代码将 onclick 绑定在
| Fruits | Value |
|---|---|
| Apple | 10 |
| Orange | 20 |
其次，JS 函数应遍历除首行外的所有 样式兼容性：若表格含 colspan/rowspan 或复杂嵌套，建议为数据行添加统一 class（如 data-row），便于后续 CSS 控制或 JS 选择： 对应 JS 可改为： 用户体验优化：可添加视觉反馈（如箭头图标旋转）提示当前展开/折叠状态： 并在 JS 中动态更新文字或图标。 无障碍支持：为表头添加 role="button" 和 aria-expanded 属性，配合屏幕阅读器：，统一切换其 display 样式（推荐使用 'none' ↔ ''，而非 'table-row'，以兼容各浏览器）： function expandCollapseTable() {
const table = document.getElementById("customers2");
const rows = table.rows;
// 从第1行开始（跳过索引0的表头）
for (let i = 1; i <blockquote>
<p>? <strong>关键细节说明</strong>： </p>
<ul>
<li>使用 rows[i].style.display === 'none' 进行严格比较，避免因内联样式未设置导致判断失效； </li>
<li>不依赖 rowObj.style.display == '' 的模糊判断，提高健壮性； </li>
<li>所有数据行初始为可见状态（无需写 style="display:table-row"），由 JS 统一管理状态。</li>
</ul>
</blockquote><h3>⚠️ 注意事项与增强建议</h3>
<tr class="data-row">
<td>Apple</td>
<td>10</td>
</tr>
document.querySelectorAll('#customers2 .data-row').forEach(row => {
row.style.display = row.style.display === 'none' ? '' : 'none';
});
<tr class="gradient" onclick="expandCollapseTable()">
<th style="width:60%">Fruits ▼</th>
<th style="width:40%">Value</th>
</tr>
<tr class="gradient" onclick="expandCollapseTable()" role="button" aria-expanded="true"><p>通过以上改造，即可实现<strong>精准、可靠、可维护</strong>的单点触发折叠功能——真正“只点第一行，才动整张表”。</p></tr>
