gpt4 book ai didi

javascript - 如何在可折叠的表格行下方添加一个div?

转载 作者:行者123 更新时间:2023-11-29 18:38:28 26 4
gpt4 key购买 nike

我正在做一个大厅。大厅将包含游戏列表。显示在 <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> .但这效果不佳,并且在表外显示了详细信息。

  • 我想让详细信息紧跟在行之后。
  • 我的第二个问题是,一次只显示一个细节的最佳方式是什么。

注意:我知道我可以在该行之后添加另一行,但这会破坏我的表格结构。所以我不想那样做。

最佳答案

这是基于您的代码的简单实现:

$(function() {
$('.collapse-item').click(function(e) {
e.preventDefault();

const target = $(this).data('target');

if (!$(target).hasClass('show')) {
$('.collapse-content').removeClass('show');
}

$(target).toggleClass('show');
});
});
.table .collapse-content > td {
padding: 0 .75rem;
}
.collapse-content > td > div {
height: 0;
opacity: 0;
}
.table .collapse-content.show > td {
padding: .75rem;
}
.collapse-content.show > td > div {
height: 100px;
opacity: 1;
}
.collapse-content > td, .collapse-content > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all ease-in-out;
transition: all 1s ease-in-out;
}
.collapse-content.show > td, .collapse-content.show > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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 class="collapse-item" data-target="#game-1">
<td>Game 1</td>
</tr>

<tr class="collapse-content" id="game-1">
<td>
<div>Description of game 1</div>
</td>
</tr>

<tr class="collapse-item" data-target="#game-2">
<td>Game 2</td>
</tr>

<tr class="collapse-content" id="game-2">
<td>
<div>Description of game 2</div>
</td>
</tr>

</tbody>
</table>

或者,您可以使用 Bootstrap accoridon :

#accordion {
margin: 2rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Game #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Game 1 details
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Game #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Game 2 details
</div>
</div>
</div>
</div>

您还可以查看 Datatables child rows .这是sliding example .

关于javascript - 如何在可折叠的表格行下方添加一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58898435/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com