通过 JavaScript 监听表格单元格点击事件，可动态隐藏同排其余 元素、将被点击单元格移至行首，并设置 colSpan 占满整行，从而实现“聚焦展开”效果，为右侧信息面板（如滑动详情栏）腾出空间。
通过 javascript 监听表格单元格点击事件，可动态隐藏同排其余 `
要实现点击某张游戏封面图（即 <td> 内的 <code><img alt="如何实现点击表格单元格后隐藏同行其他单元格并左移展开？" >）时，让其所在行的其他单元格隐藏、自身左移并横跨整行显示，核心在于 DOM 操作的三个步骤：定位目标单元格 → 隐藏同行兄弟节点 → 重排并扩展宽度。以下是一个完整、健壮的实现方案：
✅ 基础 HTML 结构（推荐增强版）
确保表格结构语义清晰，为每行单元格添加唯一 id（便于调试与后续扩展），并包裹在 <tbody> 中：<pre class="brush:php;toolbar:false;"><table id="TrendGames">
<tbody>
<tr>
<td id="game-1"><img class="GameCover" src="cover1.png" alt="Game 1"></td>
<td id="game-2"><img class="GameCover" src="cover2.png" alt="Game 2"></td>
<td id="game-3"><img class="GameCover" src="cover3.png" alt="Game 3"></td>
<td id="game-4"><img class="GameCover" src="cover4.png" alt="Game 4"></td>
</tr>
<!-- 可添加多行 -->
</tbody>
</table></pre><h3>✅ 核心 JavaScript 逻辑（含防误触与复位支持）</h3><pre class="brush:php;toolbar:false;">document.addEventListener('DOMContentLoaded', () => {
const table = document.getElementById('TrendGames');
// 使用事件委托，避免为每个 td 单独绑定
table.addEventListener('click', (e) => {
const td = e.target.closest('td');
if (!td || !td.parentElement?.matches('tr')) return;
// 重置上一次展开状态（可选，提升体验）
resetExpandedRow(td.parentElement);
// 执行展开逻辑
expandCell(td);
});
});
function expandCell(clickedTd) {
const row = clickedTd.parentElement;
const cells = Array.from(row.children); // 转为数组便于操作
// 1. 隐藏所有兄弟单元格
cells.forEach(cell => {
if (cell !== clickedTd) cell.style.display = 'none';
});
// 2. 将点击单元格移至行首
row.insertBefore(clickedTd, row.firstChild);
// 3. 设置 colspan 占满整行（自动适配任意列数）
clickedTd.colSpan = cells.length;
clickedTd.classList.add('expanded'); // 可用于 CSS 样式区分
// 4. 触发详情面板（示例：控制右侧滑块）
openDetailSlider(clickedTd);
}
function resetExpandedRow(targetRow) {
const expandedCells = targetRow.querySelectorAll('td.expanded');
expandedCells.forEach(cell => {
// 恢复原始 colspan（默认为 1）
cell.colSpan = 1;
cell.classList.remove('expanded');
// 显示所有被隐藏的单元格
Array.from(targetRow.children).forEach(td => {
td.style.display = ''; // 清空 inline display，恢复 CSS 默认
});
});
}
function openDetailSlider(td) {
console.log('Opening detail for:', td.id);
// 此处可集成动画滑入、AJAX 加载详情、或调用第三方组件
// 例如：document.getElementById('detail-slider').classList.add('open');
}</pre><h3>✅ 必备 CSS 样式（增强可读性与交互反馈）</h3><pre class="brush:php;toolbar:false;">#TrendGames td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
transition: all 0.2s ease; /* 平滑过渡 */
}
#TrendGames td.expanded {
background-color: #f8f9fa;
font-weight: bold;
}
/* 可选：为展开态添加阴影/缩放强调 */
#TrendGames td.expanded img {
max-width: 100%;
height: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}</pre><h3>⚠️ 注意事项与最佳实践</h3>
<ul><li>
<strong>避免 <code>display: none 的副作用：它会彻底移除元素布局空间，但若需“恢复”，务必清空 style.display（而非设为 'block'），否则可能破坏 <td> 的表格流特性。<li>
<strong><code>colSpan 动态计算：使用 cells.length 而非硬编码数字，确保兼容不同列数的表格。
<table>，而非遍历所有 <code><td> 绑定事件，尤其适合动态增删行的场景。<li>
<strong>移动端兼容性</strong>：<code>click 在部分 iOS 设备上存在 300ms 延迟，如需秒响应，可补充 touchstart 事件或使用 @media (hover: hover) 判断。.GameCover 添加 alt 属性（已示例），并在 openDetailSlider() 中聚焦详情区域，提升屏幕阅读器体验。该方案轻量、可扩展，既满足当前“左移+隐藏+展开”的交互需求，也为后续接入动画、服务端数据、多行独立展开等进阶功能预留了清晰接口。
