纯原生实现点击td切换详情行需确保DOM邻接关系：主tr后紧接class="detail-row"的tr，td加data-toggle="detail"，用nextElementSibling精准定位；详情tr内td必须显式设置colspan=动态列数，首次点击创建、再次点击仅切换display，异步加载加data-loaded防重，移动端需防抖和事件过滤。
点击 td 触发详情行显示/隐藏，不依赖框架
纯原生 HTML + JavaScript 就能实现，关键不是加个 onclick，而是得让详情行和触发单元格有明确的父子/邻接关系，否则容易点错行或状态错乱。常见错误是用 document.querySelectorAll('td') 统一绑事件，但没记录“哪一行的详情该切”，结果所有详情行一起开合。
推荐结构：每组数据用一个 <tr> 放主信息，紧跟着一个 class 为 detail-row 的 <tr>（必须紧邻），详情行默认 style="display:none"。
- 主单元格加
data-toggle="detail"属性标识可点击区域（避免误点表头或操作列） - JS 里用
event.target.closest('td')获取点击的单元格，再用.nextElementSibling找到紧邻的详情行 - 不要用
rowIndex或索引计算——表格有合并单元格、固定表头、服务端分页时会失效
detail-row 必须用 <tr><td colspan="N"> 包裹内容
直接写 <tr class="detail-row"><td>详情内容</td></tr> 是错的：浏览器会自动补全缺失的 <td>，导致 DOM 结构不可控，colspan 值不对齐就会错位甚至换行。
正确写法是显式设置 colspan，值等于当前表格实际列数（不能硬编码，要用 JS 动态读取）：
立即学习“前端免费学习笔记（深入）”；
const colCount = document.querySelector('table').rows[0].cells.length;
// 插入详情行时：
const detailRow = document.createElement('tr');
detailRow.className = 'detail-row';
detailRow.style.display = 'none';
const detailCell = document.createElement('td');
detailCell.colSpan = colCount;
detailCell.innerHTML = '<div class="detail-content">...</div>';
detailRow.appendChild(detailCell);
- 如果表格用了
<colgroup>或动态列增删，colCount必须每次重算 -
colspan值小于实际列数 → 详情行只占部分宽度；大于 → 可能撑开表格或报 warning - 别把详情内容直接塞进
<tr>，没有<td>包裹，CSS 样式（如 padding、border）会失效
多次点击同一单元格时，避免重复插入或 DOM 泄漏
常见错误：每次点击都 appendChild(detailRow)，但没检查是否已存在，结果一个主行下面堆了十几个详情行。
- 首次点击：创建并插入
detail-row，然后show() - 再次点击同单元格：只切换
style.display，不再新建节点 - 用
tr.nextElementSibling && tr.nextElementSibling.classList.contains('detail-row')判断是否存在 - 如果详情内容需异步加载（比如 API 请求），要在首次显示时才发起，且用
data-loaded="true"标记，避免重复请求
移动端点击区域小、易误触，需要防抖和区域限制
在手机上，手指点 td 边缘可能触发两次，或者滚动时误点。不能只靠 onclick。
- 用
addEventListener('click', handler, { passive: true })，避免阻止默认滚动 - 加简单防抖：
if (this._clickTimer) clearTimeout(this._clickTimer); this._clickTimer = setTimeout(..., 200); - 排除点击发生在
input、button、a等内部元素上：if (event.target.matches('input, button, a')) return; - 如果表格支持左右滑动，确保详情行宽度随容器自适应，别写死
width: 100%—— 它继承的是<td>宽度，不是视口宽度
细节多在 DOM 关系和状态同步上，而不是动画或样式。只要 nextElementSibling 能稳定拿到目标行，逻辑就稳了。
