用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。