本文详解如何通过原生 javascript 和 css 实现表格中每行“详情展开”功能：点击右侧三角箭头可切换显示/隐藏对应内容行，同时箭头自动旋转 90°（▶ → ▼），再次点击则复原；支持单行独立控制及一键全局展开。代码轻量、无需框架，适合初学者快速集成。
本文详解如何通过原生 javascript 和 css 实现表格中每行“详情展开”功能：点击右侧三角箭头可切换显示/隐藏对应内容行，同时箭头自动旋转 90°（▶ → ▼），再次点击则复原；支持单行独立控制及一键全局展开。代码轻量、无需框架，适合初学者快速集成。
在构建新闻列表、任务摘要或数据看板等场景中，常需在紧凑表格中提供“按需展开详情”的交互体验。本教程将手把手带你用纯 HTML + CSS + 原生 JavaScript 实现：点击行首 ▶ 箭头，动态显示/隐藏紧随其后的详情行，并同步将箭头旋转为 ▼；再次点击则收起并复位箭头。整个方案不依赖 jQuery 或任何外部库，语义清晰、结构可控，且已适配 <tr> 元素的 display 行为特性。
✅ 核心实现原理
- HTML 结构约定：每个可展开的标题行（<tr>）后紧跟一个 style="display: none;" 的详情行（<tr>），且该详情行必须是标题行的直接下一个兄弟节点（即 nextSibling）；
- 触发元素定位：使用 ▶（U+25B6）作为默认右向箭头，JavaScript 通过 textContent === '▶' 精准识别；
-
样式控制分离：
- .arrow 类负责旋转动画（transform: rotate(90deg)）；
- .display-none 类用于强制显示被隐藏的 <tr>（因 <tr> 默认 display 为 table-row，需 !important 覆盖内联 display: none）；
- DOM 遍历逻辑：利用 this.parentNode.parentNode.parentNode.nextSibling 向上穿透三层（<span> → <span> → <td> → <tr>），再取下一行 —— 这是适配原始 HTML 嵌套的关键路径。
? 完整可运行代码（精简优化版）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Breaking News — 展开/折叠详情行</title>
<style>
/* 箭头旋转动画 */
.arrow {
display: inline-block;
transform: rotate(90deg);
transition: transform 0.2s ease;
}
/* 强制显示隐藏的 table-row */
.detail-row {
display: none;
}
.detail-row.show {
display: table-row !important;
}
</style>
</head>
<body bgcolor="#EEEEEE" link="#0000FF" vlink="#0000FF" alink="#0000FF">
<table width="400" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC">
<!-- 表头 -->
<tr>
<td align="center" bgcolor="#000000" colspan="2">
<b><span style="color:#FFFFFF;font-family:Arial,sans-serif;">Breaking News</span></b>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td><b><span style="color:#333333;font-family:Arial,sans-serif;">Date</span></b></td>
<td><b><span style="color:#333333;font-family:Arial,sans-serif;">Subject</span></b></td>
</tr>
<!-- 第一条新闻（可展开） -->
<tr bgcolor="#FFFFFF">
<td><span style="color:#333333;font-family:Arial,sans-serif;">Aug 22, 2023 / 10:00a</span></td>
<td>
<span style="color:#0000FF;font-family:Arial,sans-serif;">
<span style="color:#000000;cursor:pointer;" class="toggle-btn">▶</span>
<a href="#" style="text-decoration:underline;">Article Name Here</a>
</span>
</td>
</tr>
<tr class="detail-row" bgcolor="#FFFFFF">
<td colspan="2">
<span style="color:#333333;font-family:Arial,sans-serif;">
? Content I'd like displayed when the arrow is clicked<br>
This is the detailed description for the first article.
</span>
</td>
</tr>
<!-- 第二条新闻（可展开） -->
<tr bgcolor="#FFFFFF">
<td><span style="color:#333333;font-family:Arial,sans-serif;">Aug 22, 2023 / 9:00a</span></td>
<td>
<span style="color:#0000FF;font-family:Arial,sans-serif;">
<span style="color:#000000;cursor:pointer;" class="toggle-btn">▶</span>
<a href="#" style="text-decoration:underline;">Another Article</a>
</span>
</td>
</tr>
<tr class="detail-row" bgcolor="#FFFFFF">
<td colspan="2">
<span style="color:#333333;font-family:Arial,sans-serif;">
? Additional context, sources, and related links.<br>
Fully collapsible per row.
</span>
</td>
</tr>
<!-- 全局控制按钮（可选） -->
<tr bgcolor="#FFFFFF">
<td colspan="2" align="center">
<span style="color:#0000FF;font-family:Arial,sans-serif;">
<span style="color:#04f8f8;cursor:pointer;" class="toggle-btn all-open">▶</span>
<strong>All Open / Close</strong>
</span>
</td>
</tr>
<tr class="detail-row" bgcolor="#FFFFFF">
<td colspan="2">
<span style="color:#333333;font-family:Arial,sans-serif;">
⚙️ This row will be toggled together with others when "All Open" is clicked.
</span>
</td>
</tr>
</table>
<script>
// 获取所有触发按钮（含 All Open）
const toggleButtons = document.querySelectorAll('.toggle-btn');
// 单行展开/折叠逻辑
toggleButtons.forEach(btn => {
btn.addEventListener('click', function() {
if (this.classList.contains('all-open')) {
// 全局控制：遍历所有按钮并统一操作
toggleButtons.forEach(b => {
if (!b.classList.contains('all-open')) {
b.classList.toggle('arrow');
const detailRow = b.closest('tr').nextElementSibling;
if (detailRow && detailRow.classList.contains('detail-row')) {
detailRow.classList.toggle('show');
}
}
});
} else {
// 单行控制
this.classList.toggle('arrow');
const detailRow = this.closest('tr').nextElementSibling;
if (detailRow && detailRow.classList.contains('detail-row')) {
detailRow.classList.toggle('show');
}
}
});
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- DOM 结构强约束：detail-row 必须紧跟在对应标题行之后，且为同级 <tr> 元素。若插入其他 <tr>（如分隔线），需调整 JS 中的 nextElementSibling 查找逻辑；
- 避免内联 style="display:none"：推荐统一用 CSS 类（如 .detail-row { display: none; }）管理隐藏状态，更易维护和调试；
- 可访问性增强（进阶）：为 .toggle-btn 添加 role="button" 和 aria-expanded="false" 属性，并在 JS 中同步更新 aria-expanded 值，提升屏幕阅读器兼容性；
- 性能提示：对于超长列表（>100 行），建议改用事件委托（监听 <table> 的 click 事件并判断 event.target.classList.contains('toggle-btn')），避免大量事件绑定；
- 样式兼容性：transform: rotate() 在 IE10+ 完全支持；若需兼容 IE9，可改用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);（不推荐，仅作了解）。
通过本方案，你不仅获得了一个即插即用的展开组件，更掌握了基于 DOM 关系的原生交互开发思路——简洁、可靠、易于扩展。后续可轻松接入动画库（如 Animate.css）、添加加载状态，或与后端 API 动态加载详情内容。
