如何实现点击表格单元格后隐藏同行其他单元格并左移点击单元格

下面是针对需求的完整实现方案，包含HTML修改、JavaScript逻辑和基础样式：

1. 修改后的HTML代码 #

<table id='TrendGames'>
    <tr>
        <td data-game-info="游戏1的详细信息：类型、评分等">
            <img class='GameCover' src='game1.png' alt="游戏1封面">
        </td>
        <td data-game-info="游戏2的详细信息：类型、评分等">
            <img class='GameCover' src='game2.png' alt="游戏2封面">
        </td>
        <td data-game-info="游戏3的详细信息：类型、评分等">
            <img class='GameCover' src='game3.png' alt="游戏3封面">
        </td>
        <td data-game-info="游戏4的详细信息：类型、评分等">
            <img class='GameCover' src='game4.png' alt="游戏4封面">
        </td>
    </tr>
</table>

<!-- 侧边滑块容器 -->
<div id="gameInfoSlider" class="slider-hidden">
    <button id="closeSlider">关闭</button>
    <div id="gameInfoContent"></div>
</div>

2. JavaScript逻辑代码 #

// 获取页面元素
const table = document.getElementById('TrendGames');
const slider = document.getElementById('gameInfoSlider');
const sliderContent = document.getElementById('gameInfoContent');
const closeBtn = document.getElementById('closeSlider');

// 用事件委托监听表格内的点击，无需给每个td单独绑事件
table.addEventListener('click', function(e) {
    // 确认点击的是td或其内部元素
    const clickedTd = e.target.closest('td');
    if (!clickedTd) return;

    const parentTr = clickedTd.parentElement;
    const allTds = parentTr.querySelectorAll('td');

    // 隐藏当前行其他单元格，将点击的单元格移到最左侧
    allTds.forEach(td => {
        if (td !== clickedTd) {
            td.style.display = 'none';
        }
    });
    parentTr.prepend(clickedTd);

    // 显示侧边滑块并填充对应游戏信息
    sliderContent.textContent = clickedTd.dataset.gameInfo;
    slider.classList.remove('slider-hidden');
    slider.classList.add('slider-shown');
});

// 关闭滑块并恢复表格行的原始状态
closeBtn.addEventListener('click', function() {
    slider.classList.remove('slider-shown');
    slider.classList.add('slider-hidden');

    // 恢复当前行所有单元格的显示
    const targetTr = document.querySelector('#TrendGames tr');
    targetTr.querySelectorAll('td').forEach(td => {
        td.style.display = '';
    });
});

3. 基础CSS样式（保证滑块和表格正常显示） #

/* 表格基础样式 */
#TrendGames {
    border-collapse: collapse;
    width: 100%;
}
#TrendGames td {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
#TrendGames img.GameCover {
    width: 100px;
    height: 150px;
    object-fit: cover;
}

/* 侧边滑块样式 */
#gameInfoSlider {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    transition: transform 0.3s ease;
}
.slider-hidden {
    transform: translateX(100%);
}
.slider-shown {
    transform: translateX(0);
}
#closeSlider {
    margin-bottom: 15px;
    padding: 8px 12px;
    cursor: pointer;
}

关键逻辑说明 #

• 事件委托：通过监听表格的点击事件，避免给每个td单独绑定onclick，更高效且适配后续动态添加的单元格。
• 单元格隐藏：直接设置td.style.display = 'none'即可隐藏其他单元格，比使用colspan更简单直观，后期恢复也更方便。
• 单元格左移：使用parentTr.prepend(clickedTd)将点击的单元格移到当前行的最左侧，自动调整DOM顺序。
• 侧边滑块：通过CSS的transform实现平滑的滑入滑出效果，利用data-*属性存储每个游戏的信息，点击时直接读取填充。

内容的提问来源于stack exchange，提问作者jack huang