时间戳

首页 > 解决方案 > 使用 Bootstrap 显示/隐藏嵌套动态表的行

javascript - 使用 Bootstrap 显示/隐藏嵌套动态表的行

问题描述

我正在尝试制作一个表格，显示一个体育联盟的排行榜，具有不同程度的详细信息。数据本身来自 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>

标签： javascripthtmljquerycssbootstrap-4

解决方案

这是您可以执行的操作，您必须从父级为每个调用的折叠元素添加特定的标识符：

  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);

希望能帮助到你。

推荐阅读