javascript - 使用 JS 循环中的值填充 HTML 表格

Question

我希望我的表“分数”由对象中保存的“能力”值填充。

我相信我的问题在于以下几行:

var player = document.getElementById("player" + i + 1);
playerscore.innerText = playerList[i].ability;

我可以通过不使用“i”值来增加 ID 来使其工作，我只需为每个 ID 编写一行代码即可。我确信这不是最好的处理方式，因此希望使用已设置的循环来循环 ID。

我的代码哪里出了问题？更好的方法是什么？

提前致谢。

var playerList = [
  {name: "player1", highScore: 1, ability: 8},
  {name: "player2", highScore: 1, ability: 7},
  {name: "player3", highScore: 1, ability: 6},
  {name: "player4", highScore: 1, ability: 5},
  {name: "player5", highScore: 1, ability: 4},
  {name: "player6", highScore: 1, ability: 3},
  {name: "player7", highScore: 1, ability: 2},
  {name: "player8", highScore: 1, ability: 1}
];

for (var i = 0; i < playerList.length; i++) {
  console.log(i);
  var player = document.getElementById("player" + i + 1);
  var playerscore = document.getElementById('player' + i + 1 + "score")
  var progress=Math.random();
  progress=11*progress;
  progress=Math.floor(progress);
  playerList[i].ability=playerList[i].ability+progress;
  console.log(playerList[i])

  //add players score to the table//

  playerscore.innerText = playerList[i].ability;

}

<table>
    <tr>
        <th>Player</th>
        <th>Score</th>
    </tr>
    <tr>
        <td id="player1">1</td>
        <td id="player1score">0</td>
    </tr>
    <tr>
        <td id="player2">2</td>
        <td id="player2score">0</td>
    </tr>
    <tr>
        <td id="player3">3</td>
        <td id="player3score">0</td>
    </tr>
    <tr>
        <td id="player4">4</td>
        <td id="player4score">0</td>
    </tr>
    <tr>
        <td id="player5">5</td>
        <td id="player5score">0</td>
    </tr>
    <tr>
        <td id="player6">6</td>
        <td id="player6score">0</td>
    </tr>
    <tr>
        <td id="player7">7</td>
        <td id="player7score">0</td>
    </tr>
    <tr>
        <td id="player8">8</td>
        <td id="player8score">0</td>
    </tr>
</table>

Answer 1

您最初的问题是您没有正确取消引用计数变量，因此数学计算出在字符串连接中使用的不正确索引。

要解决此问题，您需要将“i + 1”表达式放入 getElementById 调用中的一组普通括号中。

基本上是您的初始调用:

var player = document.getElementById("player" + i + 1);

需要成为:

var player = document.getElementById("player" + (i + 1));

在前一个版本中，效果是最后的 1 变成字符串，从而成为字符串的一部分，而不是按预期添加到索引中。

在普通 JS 中尝试做的事情的一个更好的方法是首先跳过所有这些 +1 的事情，并使你的代码可重用。

如果您按照 W3C 建议设置表格格式，那么您最终会得到如下所示的结果:

<table id="myTable">
  <thead>
    <tr>
      <th>Player</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody id="myTableBody">
    <tr>
      <td>Player 1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Player 2</td>
      <td>2</td>
    </tr>
    <!-- More TR's here as needed -->
  </tbody>
</table>

使用 thead 和 tbody 意味着您可以分别操作表的 header 和正文部分，从而允许您使用底层 JS api 和表属性，而不必执行构建字符串并可能导致该字符串格式不正确的危险步骤。

我并不是说构建字符串是错误的方法，但它很容易出错，正如您所看到的，它所需要的只是一个小的计算错误，而您最终会得到一个不正确的 ID 名称不匹配任何东西。

在 JavaScript 程序控制下向表中添加行非常简单，如下所示:

function addRow(playerName, playerScore)
{
  var tableBody = document.getElementById('myTableBody');
  var newRow = tableBody.insertRow(tableBody.rows.length);
  var nameCell = newRow.insertCell(0);
  var scoreCell = newRow.insertCell(1);
  var playerText = document.createTextNode(playerName);
  var scoreText = document.createTextNode(playerScore);
  nameCell.appendChild(playerText);
  scoreCell.appendChild(scoreText);
}

这会将新行添加到表格主体的末尾。按索引删除行也同样简单:

function removeRow(rowNumber)
{
  var tableBody = document.getElementById('myTableBody');
  tableBody.deleteRow(rowNumber);
}

要记住的重要一件事是，一旦删除一行，其余行就会向上移动以取代它的位置。这意味着如果您删除第一个(第0行)，那么完成后，1将变为0，2将变为1，3将变为2，依此类推。

这意味着如果您想删除前两个，则需要删除索引 0 两次，而不是您想象的那样删除 0 和 1。

至于将数据数组添加到表中，使用 add 函数现在变得非常简单:

playerList.forEach(function(listItem){
  addRow(listItem.name, listItem.ability)
});

如果您需要更改实际的文本数据，只需执行以下操作即可:

function changePlayerName(rowNumber, playerName)
{
  var tableBody = document.getElementById('myTableBody');
  tableBody.Rows[rowNumber].cells[0].innerText = playerName;
}

function changePlayerScore(rowNumber, playerScore)
{
  var tableBody = document.getElementById('myTableBody');
  tableBody.Rows[rowNumber].cells[1].innerText = playerScore;
}

这样做可以使您的代码保持整洁且易于阅读和理解。当您一个月后回来时，您仍然能够理解您想要实现的目标，并且它将帮助您的学习。

还有十几种其他方法可以做到这一点。您可以像在原始版本中那样将 ID 放置在所有标签上，然后通过字符串连接(您使用的方法)引用这些标签，您可以使用带有行 ID 的类选择器来定位实际的直接元素，您可以使用 JQuery也是。

但是，如果您正在为看起来像游戏的东西构建复杂的 UI，那么我强烈建议您考虑使用现代 UI 构建系统，例如 'Aurelia' 或 'Angular' ，它们都使用较新的 JS2016/2017语法，允许您编写真正干净的代码，具有易于理解的结构，如“for 循环”、“重复循环”以及现代 JavaScript 带来的所有其他不错的功能。也不必担心与现代 UI 框架的向后可比性，因为它们中的大多数都会构建与旧版浏览器兼容的代码。

虽然我坚信像您一样在这项任务中使用普通 JavaScript，但如果存在这种可能性，我也坚信可以使任务变得更容易。