从JSON取数后向表格添加行布局混乱，如何正确实现？

我一眼就看出问题所在啦！你现在把表格行（<tr>）插到了整个表格的外面（用了afterend），这肯定会让布局乱掉——表格行必须放在表格的<tbody>（或者<thead>/<tfoot>）内部才行，否则浏览器没法识别它们是表格的一部分。

快速修复步骤 #

1. 确保表格有正确的结构（可选但推荐） #

如果你的表格还没有显式的<tbody>，最好加上它，方便我们精准定位插入位置：

<table id="game-list-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>封面</th>
      <th>游戏名</th>
      <th>发行商</th>
      <th>评分</th>
    </tr>
  </thead>
  <tbody id="game-table-body">
    <!-- 新的表格行会被插入到这里 -->
  </tbody>
</table>

2. 修改JavaScript代码的插入逻辑 #

核心是把表格行插入到表格的<tbody>内部，而不是整个表格的外面。这里我还顺便优化了一些细节（比如给属性加双引号、优化图片alt文本）：

fetch('gamesApi.json')
 .then((response)=>{ return response.json(); })
 .then((result)=>{ displayGamesObject(result,displayGames); })
 .catch(()=>{ console.log(new Error('Error Occurred.')); });

function displayGamesObject(gameObjects,callback) {
 gameObjects.forEach(game => { callback(game) });
}

function displayGames(game) {
 // 定位到表格的tbody，用beforeend把行追加到末尾
 document.getElementById('game-table-body').insertAdjacentHTML('beforeend',`
 <tr>
 <td>${game.id}</td>
 <td>
 <a href="${game.url}" target="_blank"><img src="${game.photo}" alt="${game.name}的封面"></a>
 </td>
 <td>${game.name}</td>
 <td>${game.publisher}</td>
 <td>${game.rating}</td>
 </tr>
 `);
}

3. 如果不想给tbody加ID的替代方案 #

如果你的表格没有显式的<tbody>，浏览器会自动生成一个，你可以直接用选择器获取它：

// 替换displayGames里的目标元素行
document.getElementById('game-list-table').querySelector('tbody').insertAdjacentHTML('beforeend',`

关键调整点说明 #

• 插入位置修正：把afterend（插到目标元素外面）改成beforeend（插到目标元素内部的末尾），确保表格行属于表格的一部分
• 目标元素修正：从整个表格（game-list-table）改成表格的<tbody>，这是表格行的正确容器
• 代码规范优化：给href、src这类属性加上双引号，符合HTML标准，避免潜在的解析问题；优化图片的alt文本，提升无障碍访问体验

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