折叠 HTML 表中的多行

Question

<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn collapsed" data-toggle="collapse" data-target="#collapseCategory" aria-controls="collapseCategory" aria-expanded="false">category1
									</button>
</td>
</tr>
<div class="collapse list-group" id="collapseCategory">
<tr>
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</div>
</tbody>
</table>

我正在尝试在表格中创建一个可单击的类别，以显示和隐藏表中属于该类别的项目。我之前曾多次使用引导程序的折叠功能，但是当涉及到折叠针对其他多行的表中的一行时，它似乎有所不同。任何帮助将不胜感激。

Answer 1

浏览器会自动删除tbody中的div，因为它无效。

试试这个：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style> html { overflow-y: scroll; } </style>
<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col" width="50%">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn" data-toggle="collapse" data-target=".collapseCategory" aria-expanded="true">category1
									</button>
</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</tbody>
</table>