37
4
So i want to add the scores in the leaderboard to a table but i dont know how to do it.
所以我想把排行榜上的分数加到一个表中，但我不知道怎么做。
github:
GitHub：
https://github.com/Eternal-Network/Eternal-hub/tree/master
Https://github.com/Eternal-Network/Eternal-hub/tree/master
should i change anything?
我应该改变什么吗？
Here is my code:
以下是我的代码：
个人中心
文章发布
退出<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title>Leaderboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Eternal Network">
</head>
<body>
<button onclick="randomize()">Randomize</button>
<a href="./submit.html">Submit your Score!</a>
<div id="leaderboard" class="container">
<!-- scores will be inserted by the script here -->
</div>
<script>
let scores = [
{name: "Player 1", score: 300},
{name: "Player 2", score: 370},
{name: "Player 3", score: 500},
{name: "Player 4", score: 430},
{name: "Player 5", score: 340},
];
function updateLeaderboardView() {
let leaderboard = document.getElementById("leaderboard");
leaderboard.innerHTML = "";
scores.sort(function(a, b){ return b.score - a.score });
let elements = []; // we'll need created elements to update colors later on
// create elements for each player
for(let i=0; i<scores.length; i++) {
let name = document.createElement("div");
let score = document.createElement("div");
name.classList.add("name");
score.classList.add("score");
name.innerText = scores[i].name;
score.innerText = scores[i].score;
let scoreRow = document.createElement("div");
scoreRow.classList.add("row");
scoreRow.appendChild(name);
scoreRow.appendChild(score);
leaderboard.appendChild(scoreRow);
elements.push(scoreRow);
}
let colors = ["gold", "silver", "#cd7f32"];
for(let i=0; i < 3; i++) {
elements[i].style.color = colors[i];
}
}
updateLeaderboardView();
function randomize() {
for(var i=0; i<scores.length; i++) {
scores[i].score = Math.floor(Math.random() * (600 - 300 + 1)) + 300;
}
// when your data changes, call updateLeaderboardView
updateLeaderboardView();
}
</script>
</body>
</html>
I've tried using javascript to add the scores but i don't know how to add the scores to a table
我尝试过使用Java脚本添加分数，但我不知道如何将分数添加到表中
please help
请帮帮忙
Display the leaderboard scores in a table by creating an HTML table structure and filling it with the scores.
通过创建一个HTML表结构并用分数填充，在表中显示排行榜分数。
Replace the :
替换：
<table id="leaderboard">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<!-- scores will be inserted by the script here -->
</tbody>
</table>
Update your updateLeaderboardView function:
更新您的updateLeaderboardView函数：
function updateLeaderboardView() {
let leaderboard = document.getElementById("leaderboard").getElementsByTagName("tbody")[0];
leaderboard.innerHTML = "";
scores.sort(function(a, b) {
return b.score - a.score;
});
let colors = ["gold", "silver", "#cd7f32"];
for (let i = 0; i < scores.length; i++) {
let rank = document.createElement("td");
let name = document.createElement("td");
let score = document.createElement("td");
rank.innerText = i + 1; // rank starts from 1
name.innerText = scores[i].name;
score.innerText = scores[i].score;
let scoreRow = document.createElement("tr");
if (i < 3) { // apply color for top 3 ranks
scoreRow.style.color = colors[i];
}
scoreRow.appendChild(rank);
scoreRow.appendChild(name);
scoreRow.appendChild(score);
leaderboard.appendChild(scoreRow);
}
}
0
我是一名优秀的程序员,十分优秀！