用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变成一个字符串，并因此成为字符串的一部分，而不是按预期方式添加到索引中。

在vanilla 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意味着您可以彼此分开操作表的标题和正文部分，从而使您可以使用基础的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，但我还是相信如果可能的话，使任务更容易。

Answer 2

将您的i + 1包裹在getElementById括号中-参见下面的演示：

 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++) { 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; //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 3

 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> 

您在级联时遇到问题，假设i = 0，那么这个"player" + i + 1 = player01以便让player1像这样"player" + (i + 1) 。 这将首先计算方括号，然后将其与字符串连接。

Answer 4

“ player” + i + 1的结果将不符合预期。 您可以将i + 1存储在变量中，并在getElementById（）中使用它。

var index = i + 1;
var player = document.getElementById("player" + index);
var playerscore = document.getElementById('player' + index + "score")

这是工作中的jsfiddle。