59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
|
|
||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
||
|
|
// Sélection des éléments HTML nécessaires
|
||
|
|
const tableBody = document.querySelector("tbody");
|
||
|
|
const sortIcon = document.getElementById("sort");
|
||
|
|
const searchInput = document.getElementById("myInput");
|
||
|
|
|
||
|
|
// Fonction pour créer une ligne HTML pour chaque équipe dans les données
|
||
|
|
function createTableRow(team) {
|
||
|
|
const row = document.createElement("tr");
|
||
|
|
row.innerHTML = `
|
||
|
|
<td>${team.intRank}</td>
|
||
|
|
<td><img src="${team.strTeamBadge}" alt="${team.strTeam}" class="team-badge"></td>
|
||
|
|
<td>${team.strTeam}</td>
|
||
|
|
<td>${team.intPlayed}</td>
|
||
|
|
<td>${team.intWin}</td>
|
||
|
|
<td>${team.intDraw}</td>
|
||
|
|
<td>${team.intLoss}</td>
|
||
|
|
<td>${team.intGoalsFor}</td>
|
||
|
|
<td>${team.intGoalsAgainst}</td>
|
||
|
|
<td>${team.intGoalDifference}</td>
|
||
|
|
<td>${team.intPoints}</td>
|
||
|
|
`;
|
||
|
|
return row;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour afficher les équipes dans le tableau
|
||
|
|
function displayTeams(teams) {
|
||
|
|
tableBody.innerHTML = "";
|
||
|
|
teams.forEach((team) => {
|
||
|
|
const row = createTableRow(team);
|
||
|
|
tableBody.appendChild(row);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Affichage initial des équipes
|
||
|
|
displayTeams(data);
|
||
|
|
|
||
|
|
// Fonction de tri sur la colonne du rang
|
||
|
|
let ascendingOrder = true;
|
||
|
|
sortIcon.addEventListener("click", function () {
|
||
|
|
data.sort((a, b) => {
|
||
|
|
const order = ascendingOrder ? 1 : -1;
|
||
|
|
return order * (a.intRank - b.intRank);
|
||
|
|
});
|
||
|
|
ascendingOrder = !ascendingOrder;
|
||
|
|
displayTeams(data);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Fonction de recherche par nom d'équipe
|
||
|
|
searchInput.addEventListener("input", function () {
|
||
|
|
const searchTerm = searchInput.value.toLowerCase();
|
||
|
|
const filteredTeams = data.filter((team) =>
|
||
|
|
team.strTeam.toLowerCase().includes(searchTerm)
|
||
|
|
);
|
||
|
|
displayTeams(filteredTeams);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|