html表使用js

Question

我正在嘗試用 javascript 填充 html 主體表，但它沒有渲染，誰能告訴我為什么？

 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 = ""; for (var i = 0; i < players.lenght; 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>"; } var playerTable = document.querySelector("tbody"); 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); }

 <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 id="playerT"> </table>

我嘗試將選擇器更改為 id 並使用 getElementById，使用 createElement 在腳本上創建 tbody，還嘗試在那里創建整個內容，寫入並重寫所有代碼，我很絕望。

Answer 1

可能您沒有tbody的結束標簽

<tbody id="playerT">

應該

<tbody id="playerT"></tbody>

Answer 2

您的for循環聲明中有錯字，應該是players.length而不是players.lenght 。 后者將是undefined的，因此循環不會執行。

這是更正后的版本：

 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" not "lenght" 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>"; } var playerTable = document.querySelector("tbody"); 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); }

 <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 id="playerT"> </table>

Answer 3

您可以使用 HTML DOM Table insertRow() function 將數據插入到表中，而不是像這樣將 html 添加到表中。

你可以在這里閱讀更多關於它是如何工作的： https://www.w3schools.com/jsref/met_table_insertrow.asp

一個簡單的例子來說明它是如何工作的：

 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 = ""; const table = document.getElementById("player-table") for (const player of players) { var row = table.insertRow(0); var cell1 = row.insertCell(0); cell1.innerHTML = player.name; var cell2 = row.insertCell(1); cell2.innerHTML = player.victories; var cell2 = row.insertCell(2); cell2.innerHTML = player.ties; var cell2 = row.insertCell(3); cell2.innerHTML = player.defeats; var cell2 = row.insertCell(4); cell2.innerHTML = player.points; } } 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); }

 <table id="player-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 id="playerT"></tbody> </table>