Я пытаюсь создать таблицу, которая имеет эквивалент функции наведения таблицы Bootstrap вместе с функцией чередования таблиц.Тем не менее, CSS, кажется, не применяется должным образом.Применяется стиль th, однако ни одна из строк не применяется.Кроме того, я знаю, что toAppend строки, вероятно, должны быть более четкими, но это не моя текущая задача.
Вот как выглядит таблица в настоящее время:
JavaScript:
function fortniteSearch(data) {
// data to retrieve data / construct table
const tableCells = [
{category: "lifeTimeStats", stats: [8, 9, 10, 11, 7, 2, 4, 5]},
{category: "stats", subcategory: "p2", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top10", "top25"]},
{category: "stats", subcategory: "p10", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top5", "top12"]},
{category: "stats", subcategory: "p9", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top3", "top6"]}];
// cell labels and flag
const gameModes = ["OVERALL:", "SOLO:", "DUO:", "SQUADS:"];
// check for errors
if(data.error !== undefined)
alert("Player not found!");
else {
// set player name and image
$("#playerName").val(data.IGN);
$("#playerIcon").attr("src", "/images/avatar_fortnite.png");
// show stats
$("#statDisplay").fadeIn(500);
// clear pre-existing table
$("#statTable").empty();
// iterate through the table
for(let i = 0; i < tableCells.length; i++) {
// set header row
$("#statTable").append('<thead> <tr> <th align = "center" colspan = 8> <b> <u>' + gameModes[i] + "</u> </b> </th> </tr> </thead> <tbody> <tr>");
// intialize stats
let toAppend;
// iterate through stats
for(let j = 0; j < tableCells[i].stats.length; j++) {
// if there is no sub-category (use different html)
if(tableCells[i].subcategory === undefined)
toAppend = ("<td> <b>" + data[tableCells[i].category][tableCells[i].stats[j]].key + ":</b>" + "<br>" + data[tableCells[i].category][tableCells[i].stats[j]].value + "</td>");
else
toAppend = ("<td> <b>" + data[tableCells[i].category][tableCells[i].subcategory][tableCells[i].stats[j]].label + ":</b>" + "<br>" + data[tableCells[i].category][tableCells[i].subcategory][tableCells[i].stats[j]].value + "</td>");
// add html
$(".statTable").append(toAppend);
}
// close table row
$(".statTable").append("</tr> </tbody>");
}
// hide game window
$("#gameSelect").css("display", "none");
}
}
CSS:
#statTable {
width: 95%;
height: 10%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
text-align: center;
border: 1px solid black;
background-color: white;
}
#statTable th {
background-color: green;
color: white;
text-align: center;
}
#statTable tr:nth-child(even) {
background: grey;
}
#statTable tr:hover td {
background-color: red;
}
HTML:
<body>
<div class = "standardImage" id = "statDisplay">
<div name = "statBanner" id = "statBanner" class = "statBanner">
<img src = "/images/icon_xbox.png" name = "playerIcon" class = "playerIcon" id = "playerIcon" alt = "Player Icon">
<input name = "playerName" class = "playerName" id = "playerName" readonly>
<span name = "statButtons" id = "statButtons" class = "statButtons">
<button name = "backButton" class = "backButton" id = "backButton"> BACK </button>
<button name = "refreshButton" class = "refreshButton" id = "refreshButton"> REFRESH </button>
</span>
</div>
<table class = "statTable" id = "statTable"> <thead> </thead> <tbody> </tbody> </table>
</div>
</body>