表格克隆元素位置偏移求助：同样式功能元素位置异常

问题描述 #

我写了一段表格交互代码，点击单元格时会隐藏整行的子单元格，同时把被点击的单元格克隆到行首并跨整行显示。但现在遇到问题：第一行克隆的图像位置正常（和原单元格位置一致），第二行的克隆元素却会偏移到右上角。所有元素宽高一致，只给表格加了通用样式，不知道哪里出问题了。

现有代码 #

HTML #

<table id='TrendGames'>
    <tbody>
        <tr>
            <td id="cell1">
            <img class='GameCover' src='Fortnite Front Cover.png' alt="cell1" />
            </td>
            <td id="cell2">
            <img class='GameCover' src='LOL Front Cover.png' alt="cell2" />
            </td>
            <td id="cell3">
            <img class='GameCover' src='Minecraft Front Cover.png' alt="cell3" />
            </td>
            <td id="cell4">
            <img class='GameCover' src='Roblox Front Cover.png' alt="cell4" />
            </td>
        </tr>
        <tr>
            <td id="cell1"> Cell 1
            <img class='GameCover' src='Call of Duty Front Cover.jpg' alt="cell1" />
            </td>
            <td id="cell2">Cell 2
            <img class='GameCover' src='Valorant Front Cover.jpg' alt="cell2" />
            </td>
            <td id="cell3">Cell 3
            <img class='GameCover' src='Counter Strike 2 Front Cover.jpeg' alt="cell3" />
            </td>
            <td id="cell4">Cell 4
            <img class='GameCover' src='The Sim 4 Front Cover.webp' alt="cell4" />
            </td>
        </tr>
  </tbody>
</table>

CSS #

table {
    width: 100%;
}

td {
    padding: 45px;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  let table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    let clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  const cells = row.children;
  const display = cells[cells.length - 1].style.display ? '' : 'none';

  for (let i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) { 
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    openSlider(newCell);
  } else {
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}

问题原因分析 #

• 重复id违反HTML规范：两行的td使用了相同的id（如cell1、cell2），浏览器对重复id的解析可能出现异常，导致样式或脚本行为不一致。
• 单元格内容结构不一致：第一行的td仅包含图片，第二行的td包含文本+图片，默认的文本基线对齐会让图片位置偏移，加上td的padding，最终导致克隆后的布局差异。
• 脚本状态判断逻辑模糊：通过最后一个单元格的style.display判断行状态，当行内已有克隆单元格时，这个判断会出现误差，可能导致异常的克隆/删除操作。

解决方案 #

1. 修复重复id问题 #

将td的id修改为唯一值，或者直接移除id（如果脚本不依赖id）：

<tr>
    <td class="game-cell">
    <img class='GameCover' src='Fortnite Front Cover.png' alt="Fortnite" />
    </td>
    <!-- 其他单元格同理 -->
</tr>
<tr>
    <td class="game-cell"> Cell 1
    <img class='GameCover' src='Call of Duty Front Cover.jpg' alt="Call of Duty" />
    </td>
    <!-- 其他单元格同理 -->
</tr>

2. 统一内容布局样式 #

为图片添加样式，避免文本对齐影响位置，同时统一单元格内的布局：

.GameCover {
    display: block; /* 让图片块级显示，避免和文本基线对齐 */
    margin-top: 8px; /* 可选：给文本和图片之间加间距 */
}

td {
    padding: 45px;
    vertical-align: top; /* 统一单元格内容顶部对齐 */
}

3. 优化脚本状态判断 #

用自定义属性记录行的展开状态，避免依赖单元格的display属性：

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  // 用自定义属性记录当前行是否展开
  const isExpanded = row.dataset.expanded === 'true';
  
  if (!isExpanded) {
    // 隐藏所有原单元格
    Array.from(row.children).forEach(cell => {
      cell.style.display = 'none';
    });
    // 克隆并插入新单元格
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = row.children.length;
    row.insertBefore(newCell, row.firstChild);
    row.dataset.expanded = 'true';
    openSlider(newCell);
  } else {
    // 删除克隆的单元格，显示原单元格
    row.removeChild(row.firstChild);
    Array.from(row.children).forEach(cell => {
      cell.style.display = '';
    });
    row.dataset.expanded = 'false';
    closeSlider(clickedCell);
  }
}

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