本文介绍一种纯 JavaScript 实现方式：当用户点击表格中的某个 单元格时，自动隐藏同一行中其余单元格，将被点击单元格移至最左侧，并通过 colSpan 扩展其宽度以覆盖整行，为右侧信息面板（如滑动详情区）腾出空间。
本文介绍一种纯 javascript 实现方式：当用户点击表格中的某个 `
要实现“点击表格单元格 → 隐藏同行其他单元格 → 当前单元格左移并横跨整行”的交互效果，核心在于 DOM 操作的精准控制：隐藏非目标单元格、调整 DOM 顺序、动态设置 colSpan，并确保事件委托健壮可靠。
以下是一个完整、可直接运行的解决方案：
✅ 基础 HTML 结构（推荐含 <tbody>）<pre class="brush:php;toolbar:false;"></pre>
<table id="TrendGames"><tbody>
<tr>
<td id="game1"><img class="GameCover" src="game1.png" alt="Game 1"></td>
<td id="game2"><img class="GameCover" src="game2.png" alt="Game 2"></td>
<td id="game3"><img class="GameCover" src="game3.png" alt="Game 3"></td>
<td id="game4"><img class="GameCover" src="game4.png" alt="Game 4"></td>
</tr>
<!-- 可添加多行，每行独立响应 -->
</tbody></table>
<h3>✅ 样式建议（增强可读性与调试）</h3>
<pre class="brush:php;toolbar:false;">#TrendGames td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
transition: background-color 0.2s;
}
#TrendGames td:hover {
background-color: #f5f5f5;
}
.GameCover {
max-width: 100%;
height: auto;
display: block;
}</pre>
<h3>✅ JavaScript 逻辑（含防错与复位支持）</h3>
<pre class="brush:php;toolbar:false;">document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('TrendGames');
// 使用事件委托，避免为每个 td 绑定单独监听器
table.addEventListener('click', function(e) {
const td = e.target.closest('td');
if (!td || !td.parentElement || td.parentElement.tagName !== 'TR') return;
handleCellClick(td);
});
});
function handleCellClick(clickedTd) {
const row = clickedTd.parentElement;
const allCells = Array.from(row.children); // 转为数组便于操作
// 【关键步骤 1】隐藏同排其他单元格
allCells.forEach(cell => {
if (cell !== clickedTd) {
cell.style.display = 'none';
}
});
// 【关键步骤 2】将点击单元格移至行首
row.insertBefore(clickedTd, row.firstChild);
// 【关键步骤 3】设置 colSpan = 当前行总列数（适配多行不同列数）
clickedTd.colSpan = allCells.length;
// 【可选】触发右侧信息面板（例如：显示详情滑块）
openSlider(clickedTd);
// 【进阶提示】若需支持「再次点击恢复原状」，可在此处记录原始状态并添加 toggle 逻辑
}
function openSlider(td) {
console.log('Opening slider for:', td.id || 'unnamed cell');
// 此处可插入：显示右侧浮动面板、加载游戏详情、播放动画等
// 示例：document.getElementById('detailPanel').classList.remove('hidden');
}</pre>
<h3>⚠️ 注意事项与最佳实践</h3>
<ul><li>
<strong><code>colSpan 是覆盖性属性：设置后会忽略该 <td> 原有位置，直接横跨指定列数；务必在隐藏其他单元格<strong>之后</strong>设置，否则可能引发渲染异常。<li>
<strong>避免重复绑定</strong>：使用 <code>DOMContentLoaded 确保 DOM 加载完成后再初始化事件监听。
closest() 和 Array.from() 在现代浏览器中广泛支持；如需兼容 IE，可用 e.target.tagName === 'TD' ? e.target : e.target.parentNode + for 循环替代。<td> 添加 <code>tabindex="0" 并监听 Enter/Space 键，提升键盘可访问性（进阶需求）。该方案轻量、无依赖、语义清晰，既满足视觉动效需求，又为后续扩展（如详情面板、动画过渡、状态回滚）预留了良好接口。只需将代码嵌入页面，即可立即生效。
