我正在尝试制作一个表格，显示一个体育联盟的排行榜，具有不同程度的细节。数据本身来自 SQL 数据库。我有很多团队，每个团队由不同数量的玩家组成(注意：一个玩家可以属于一个以上的团队(，每个玩家通过参加不同数量的活动来赚钱(注意：超过1个玩家可以参加一个事件(。团队名称是唯一的。
我希望表格最初只显示每支球队的总收入，然后在单击球队的行时，仅显示该球队球员的详细信息。 然后，当单击某个玩家的行时，将显示该玩家在该团队中的事件详细信息。第二次单击该行将隐藏已显示的数据。
动态设置数据目标和 id 属性让我感到困惑。对于我尝试过的所有选项，单击不起作用。 如果我对这些值进行硬编码(示例如下所示(，表格将按照我预期的方式工作，但显然不是我想要的方式。 换句话说，它显示了所有父级中请求级别的所有数据 - 但它应该只针对选定的父级。在代码片段中，我使用简化的数组代替对数据库的调用。
谢谢！
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>这是你可以做的， 您必须从父级向每个调用的折叠元素添加特定标识符：
function displayLeaderboard(arr) {
for (let i = 0; i < arr.length; i++) {
$(".leaderboard-container").append(
"<tr data-toggle='collapse' data-target='#demo"+ i +"' 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='demo"+ i +"' data-toggle='collapse' data-target='#demo-"+ i +"-"+ j +"' 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='demo-"+ i +"-"+ j +"' ><td>" + arr[i].teamPlayers[j].events[k].eventName + "</td><td>" + arr[i].teamPlayers[j].events[k].eventEarnings + "</td></tr>"
)
}
}
}
}
displayLeaderboard(arr);
希望对您有所帮助。