使用JavaScript填充HTML表格无法渲染，求问题排查与解决方法

问题概述 #

尝试通过JavaScript填充HTML表格，但表格始终无法渲染出数据。已尝试修改选择器为id并使用getElementById、通过脚本创建tbody、直接生成整个表格等方法，均未解决问题。

错误原因分析 #

1. 拼写错误导致循环未执行：在showPlayersOnScreen函数的for循环中，将数组长度属性length误写为lenght，导致循环条件不成立，根本没有生成表格行的HTML代码。
2. HTML标签未闭合：<tbody id="playerT">标签未闭合，可能导致DOM解析异常，影响后续内容插入。
3. 选择器精度不足：使用document.querySelector("tbody")选择tbody元素，若页面存在多个tbody时会出现选择错误，建议使用id选择器更精准。

修复后的代码 #

JavaScript代码 #

var shepard = {
  name: "Commander",
  victories: 3,
  ties: 1,
  defeats: 6,
  points: 0
};
var lara = {
  name: "RaiderOfTombs",
  victories: 2,
  ties: 1,
  defeats: 7,
  points: 0
};
var altair = {
  name: "HiddenOne",
  victories: 4,
  ties: 1,
  defeats: 5,
  points: 0
};

function calculatePoints(player) {
  var points = player.victories * 3 + player.ties;
  return points;
}

shepard.points = calculatePoints(shepard);
lara.points = calculatePoints(lara);
altair.points = calculatePoints(altair);

var players = [shepard, lara, altair];

function showPlayersOnScreen(players) {
  var element = "";
  // 修正length拼写错误
  for (var i = 0; i < players.length; i++) {
    element += "<tr><td>" + players[i].name + "</td>";
    element += "<td>" + players[i].victories + "</td>";
    element += "<td>" + players[i].ties + "</td>";
    element += "<td>" + players[i].defeats + "</td>";
    element += "<td>" + players[i].points + "</td>";
    element += "<td><button class='w' onClick='addVictory(" + i + ")'>Victory</button></td>";
    element += "<td><button class='t' onClick='addTie(" + i + ")'>Tie</button></td>";
    element += "<td><button class='d' onClick='addDefeat(" + i + ")'>Defeat</button></td>";
    element += "</tr>";
  }

  // 使用id选择器精准定位tbody
  var playerTable = document.getElementById("playerT");
  playerTable.innerHTML = element;
}

showPlayersOnScreen(players);

function addVictory(i) {
  var player = players[i];
  player.victories++;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addTie(i) {
  var player = players[i];
  player.ties++;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addDefeat(i) {
  var player = players[i];
  player.defeats++;
  showPlayersOnScreen(players);
}

HTML代码 #

<table>
  <thead>
    <tr>
      <th>Player</th>
      <th>Victories</th>
      <th>Ties</th>
      <th>Defeats</th>
      <th>Points</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>
  <!-- 闭合tbody标签 -->
  <tbody id="playerT"></tbody>
</table>

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