实现表格行数据的折叠展开与箭头图标动态切换-html教程-PHP中文网

实现表格行数据的折叠展开与箭头图标动态切换

本文详解如何使用原生 javascript 和 css 实现表格中“点击右侧箭头展开详情行、同时旋转箭头为向下，再次点击则收起并复位”的交互效果，无需框架，代码轻量、结构清晰、易于维护。

本文详解如何使用原生 javascript 和 css 实现表格中“点击右侧箭头展开详情行、同时旋转箭头为向下，再次点击则收起并复位”的交互效果，无需框架，代码轻量、结构清晰、易于维护。

在构建新闻列表、订单摘要或 FAQ 表格等场景中，常需通过简洁的视觉线索（如箭头图标）控制额外内容的显隐。本教程将手把手带你用纯 HTML/CSS/JS 实现一个可逐行展开/收起的表格结构，并同步完成图标的旋转动画（▶ → ▼ → ▶），全程不依赖任何外部库，兼顾可读性与实用性。

✅ 核心实现逻辑

HTML 结构约定：每条主数据行（）后紧跟一条 colspan="2" 的隐藏详情行（初始设 style="display: none;"）；
触发元素定位：使用 ▶（Unicode 右向三角）作为可点击箭头，包裹在中；
JS 事件绑定：遍历所有，识别含 ▶ 的元素，为其添加点击监听；
状态切换：
- 切换 .arrow 类实现 90° 旋转（CSS transform: rotate(90deg)）；
- 切换 .display-none 类控制下一行（nextSibling）的 display: table-row 显隐。

? 完整示例代码

以下为精简优化后的完整可运行代码（已移除冗余内联样式，增强语义与可维护性）：



  <meta charset="UTF-8"><title>Breaking News — 折叠展开表格</title><style>
    table { width: 400px; margin: 20px auto; border-collapse: collapse; background: #CCCCCC; }
    th, td { padding: 5px 10px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
    th { background: #000000; color: white; }
    .header-row { background: #CCCCCC; }
    .data-row { background: #FFFFFF; }
    .detail-row { background: #FFFFFF; display: none; }
    .detail-row.show { display: table-row !important; }
    .arrow {
      display: inline-block;
      cursor: pointer;
      color: #000000;
      transition: transform 0.2s ease;
    }
    .arrow.rotated { transform: rotate(90deg); }
    a { color: #0000FF; text-decoration: none; }
  </style>

Breaking News
Date	Subject
Aug 22, 2023 / 10:00a	▶ Article Name Here
Content I'd like displayed when the arrow is clicked Supports multiple lines and basic HTML.
Aug 22, 2023 / 9:00a	▶ Another Article
Additional details for the second item — collapsible on demand.
Aug 22, 2023 / 8:00a	▶ Final Article
This row will appear only when its corresponding arrow is clicked.

⚠️ 注意事项与最佳实践

DOM 定位健壮性：原答案中使用 parentNode.parentNode.parentNode.nextSibling 易受嵌套变化影响；本教程改用 closest('tr').nextElementSibling，语义清晰、容错更强；
CSS 动画平滑性：添加 transition: transform 0.2s ease 让箭头旋转更自然；
可访问性提示：建议为箭头添加 aria-expanded="false" 并在 JS 中同步更新，提升屏幕阅读器支持；
避免内联样式：将 style="display: none;" 替换为类名控制（.detail-row + .show），利于主题切换与维护；
扩展性设计：若需「一键展开全部」，只需解注释底部 JS 片段，并在任意上添加对应逻辑。