我正在说一种大厅。大堂将列出比赛清单。显示在<table>
中。每个<tr>
都包含名称,<td>
中没有玩家等。现在,我希望当我单击该行时,应该显示游戏的相应详细信息。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">Button</button>
<table class="table text-align=">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#game-1">
<td>Game 1</td>
<div class="collapse" id="game-1">Description of game 2</div>
</tr>
<tr data-toggle="collapse" data-target="#game-2">
<td>Game 2</td>
<div class="collapse" id="game-2">Description of game 2</div>
</tr>
</tbody>
</table>
我尝试在<div>
中使用该<tr>
。但这并不能很好地工作,并且在表外显示了详细信息。
- 我想使详细信息显示在行的后面。
- 我的第二个问题是,一次只显示一个死亡的最佳方法是什么。
注意::我知道我可以在该行之后添加另一行,但这会破坏表的结构。所以我不想那样。