使用 Bootstrap 显示/隐藏嵌套动态表的行
[英]Show / Hide rows of nested, dynamic table using Bootstrap Collapse
问题描述
我正在尝试制作一个表格，显示一个体育联盟的排行榜，具有不同程度的详细信息。 数据本身来自 SQL 数据库。 我有多个团队，每个团队包含不同数量的玩家（注意：一个玩家可以属于超过 1 个团队）并且每个玩家通过参加不同数量的活动来赚钱（注意：超过 1 个玩家可以参加在一个事件中）。 团队名称是唯一的。
我希望表格最初只显示每支球队的总收入，然后当点击球队的行时，只显示该球队球员的详细信息。 然后，当单击球员所在的行时，将显示该球队中该球员的事件详细信息。 第二次单击该行将隐藏已显示的数据。
动态设置 data-target 和 id 属性让我大吃一惊。 使用我尝试过的所有选项，单击无效。 如果我对这些值进行硬编码（如下所示的示例），表格会按我预期的方式工作，但显然不是我想要的方式。 换句话说，它显示了所有父级的请求级别的所有数据 - 但它应该仅适用于选定的父级。 在代码片段中，我使用一个简化的数组来代替对 db 的调用。
谢谢！
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>
1 个解决方案
解决方案1
0 已采纳 2020-05-25 04:06:11
这是您可以执行的操作，您必须从父级为每个调用的折叠元素添加特定的标识符：
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);
希望能帮助到你。
Bootstrap崩溃最初显示/隐藏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.