I am currently working on creating a dynamic leaderboard table for a sports league using data from a SQL database. The league consists of multiple teams, each team has different players (with some players belonging to more than one team), and players earn money by participating in various events. The goal is to display the total earnings for each team initially. When a team row is clicked, the details of that team's players should be revealed. Similarly, clicking on a player row should show the event details for that specific player on their team. Clicking again on a row should hide the displayed data. I’m facing challenges with dynamically setting the data-target and id attributes. While hard-coding these values works as expected, it reveals all data across all parents instead of just the selected parent. I have provided a simplified array example in place of querying the actual database. Thank you!
https://jsfiddle.net/gistewart/e9qyLv20/
const arr = [{
teamName: "team1",
teamEarnings: "$1700",
teamPlayers: [{
playerName: "player1",
playerEarnings: "$1000",
events: [{
eventName: "event1",
eventEarnings: "$400"
}, {
eventName: "event2",
eventEarnings: "$600"
}],
},
{
playerName: "player2",
playerEarnings: "$700",
events: [{
eventName: "event2",
eventEarnings: "$500"
}, {
eventName: "event3",
eventEarnings: "$200"
}],
}
],
},
{
teamName: "team2",
teamEarnings: "$2900",
teamPlayers: [{
playerName: "player1",
playerEarnings: "$900",
events: [{
eventName: "event1",
eventEarnings: "$800"
}, {
eventName: "event3",
eventEarnings: "$100"
}],
},
{
playerName: "player3",
playerEarnings: "$2000",
events: [{
eventName: "event2",
eventEarnings: "$1250"
}, {
eventName: "event3",
eventEarnings: "$750"
}],
}
],
}
]
function displayLeaderboard(arr) {
for (let i = 0; i < arr.length; i++) {
$(".leaderboard-container").append(
"<tr data-toggle='collapse' data-target='#demo1' class='clickabe'><td>" + arr[i].teamName + "</td><td>" + arr[i].teamEarnings + "</td></tr>"
)
for (let j = 0; j < arr[i].teamPlayers.length; j++) {
$(".leaderboard-container").append(
"<tr class='level2 hiddenRow collapse' id='demo1' data-toggle='collapse' data-target='#demo2' class='clickable'><td>" + arr[i].teamPlayers[j].playerName + "</td><td>" + arr[i].teamPlayers[j].playerEarnings + "</td></tr>"
)
for (let k = 0; k < arr[i].teamPlayers[j].events.length; k++) {
$(".leaderboard-container").append(
"<tr class='level3 hiddenRow collapse' id='demo2' ><td>" + arr[i].teamPlayers[j].events[k].eventName + "</td><td>" + arr[i].teamPlayers[j].events[k].eventEarnings + "</td></tr>"
)
}
}
}
}
displayLeaderboard(arr);.level2 {
font-size: 0.9em;
color: blue;
}
.level3 {
font-size: 0.8em;
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<table class="table leaderboard-container">
<thead>
<tr>
<th scope="col">Team</th>
<th scope="col">Earnings</th>
</tr>
</thead>
<tbody>
</tbody>
</table>