本文介绍一种纯 javascript 实现方案：点击任意表格单元格时，将其移至行首、跨列占据整行宽度，同时隐藏该行中其余单元格，并为后续集成信息滑块预留接口。
本文介绍一种纯 javascript 实现方案：点击任意表格单元格时，将其移至行首、跨列占据整行宽度，同时隐藏该行中其余单元格，并为后续集成信息滑块预留接口。
要实现“点击表格单元格 → 该单元格左对齐并横跨整行 → 同行其余单元格隐藏”的交互效果，核心在于动态操作 DOM 元素的 display 样式、colSpan 属性及节点顺序。以下是一个完整、可直接运行的教程方案。
✅ 基础 HTML 结构（推荐增强语义）
确保表格结构清晰，每行 <tr> 包含多个 <code><td>，并为单元格添加唯一 <code>id（便于调试与扩展）：
<table id="TrendGames">
<tbody>
<tr>
<td id="game-1"><img class="GameCover" src="game1.png" alt="Game 1"></td>
<td id="game-2"><img class="GameCover" src="game2.png" alt="Game 2"></td>
<td id="game-3"><img class="GameCover" src="game3.png" alt="Game 3"></td>
<td id="game-4"><img class="GameCover" src="game4.png" alt="Game 4"></td>
</tr>
<!-- 可添加多行，逻辑自动适配 -->
</tbody>
</table>? 提示：使用
<tbody> 显式包裹内容，提升可维护性；<code>alt属性增强可访问性。✅ 核心 JavaScript 逻辑（事件委托 + 动态重排）
将脚本置于
DOMContentLoaded中确保 DOM 加载完成后再绑定事件：document.addEventListener('DOMContentLoaded', function() { const table = document.getElementById('TrendGames'); table.addEventListener('click', function(event) { // 使用 closest() 安全捕获点击的 td（即使点在 img 内也有效） const clickedCell = event.target.closest('td'); if (clickedCell && clickedCell.parentElement.tagName === 'TR') { handleCellClick(clickedCell); } }); }); function handleCellClick(cell) { const row = cell.parentElement; const allCells = Array.from(row.children); // 转为数组便于遍历 // 1️⃣ 隐藏同行其他单元格 allCells.forEach(td => { if (td !== cell) td.style.display = 'none'; }); // 2️⃣ 将点击单元格移至行首（最左侧） row.insertBefore(cell, row.firstChild); // 3️⃣ 设置跨列：colSpan = 当前行单元格总数 cell.colSpan = allCells.length; // 4️⃣ 触发信息面板（如右侧滑块）——此处为占位调用 openSlider(cell); } function openSlider(cell) { console.log(`Opening detail slider for: ${cell.id}`); // ✅ 此处可插入：显示右侧固定侧边栏、AJAX 加载详情、CSS 动画展开等 // 示例伪代码： // document.getElementById('detail-slider').dataset.target = cell.id; // document.getElementById('detail-slider').classList.add('open'); }✅ 必备 CSS 样式（保障视觉一致性）
#TrendGames td { border: 1px solid #ccc; padding: 8px; vertical-align: middle; transition: all 0.2s ease; /* 平滑过渡更专业 */ } /* 可选：为展开后的单元格增加强调样式 */ #TrendGames td[colspan] { background-color: #f8f9fa; font-weight: bold; }⚠️ 注意事项与最佳实践
- 避免重复触发：当前逻辑未防抖，若需防止快速连点导致异常，可在
handleCellClick开头加锁（如if (cell.dataset.expanded) return;），并在展开后设置cell.dataset.expanded = 'true'。- 恢复状态支持：如需“再次点击恢复原状”，可在
handleCellClick中检测cell.hasAttribute('colspan')，有则还原colSpan=1、display=''并重排回原位置（需记录原始索引）。- 无障碍友好：为
.GameCover图片添加role="button"和tabindex="0"，并监听Enter/Space键，满足键盘操作需求。- 性能提示：
row.children是实时集合，建议转为Array.from()或[...row.children]再操作，避免循环中 DOM 变更引发意外行为。✅ 总结
该方案不依赖任何第三方库，仅用原生 JavaScript 即可实现表格单元格的智能聚焦与布局重构。其关键在于：
① 利用事件委托精准捕获目标<td>；<br> ② 通过 <code>display: none隐藏兄弟节点；
③ 借助insertBefore(..., firstChild)实现左对齐；
④ 用colSpan动态撑满整行宽度；
⑤ 留出openSlider()接口无缝对接后续 UI 扩展（如右侧抽屉、模态框或动态内容加载）。只需复制上述 HTML、CSS 与 JS 代码，即可立即体验响应式表格交互效果。
