Estoy intentando crear una tabla en la que una fila hace de cabecera de un grupo de filas que vienen a continuación.
Al cargar la tabla se han de ver todas las filas (cabeceras y detalles) y al pulsar en una cabecera, esconderse o "plegarse" sus filas de detalle.
Para ello estoy probando con la clase "collapse
" de bootstrap (versión 4).
El código es este:
<table id="datoscuentas" class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Cuenta</th>
<th>Impuestos</th>
<th>Transferencias</th>
</tr>
</thead>
<tbody>
@{
var empresaTemp = String.Empty;
for (var i = 0; i < Model.Count; i++)
{
if (empresaTemp != Model[i].NomEmpresa)
{
<tr>
<td colspan="8">
<span data-toggle="collapse" data-target="#@i">
@Html.DisplayFor(x => @Model[i].NomEmpresa, new { @id = "NomEmpresa_" + i, @class = "form-control" })
</span>
</td>
</tr>
empresaTemp = Model[i].NomEmpresa;
}
<tr id="@i" class="collapse in">
<td>@Html.TextBoxFor(x => @Model[i].Cuenta, new { @id = "Cuenta_" + i, @class = "form-control" })</td>
<td>@Html.TextBoxFor(x => @Model[i].Impuestos, new { @id = "Impuestos_" + i, @class = "form-control" })</td>
<td>@Html.TextBoxFor(x => @Model[i].Transferencias, new { @id = "Transferencias_" + i, @class = "form-control" })</td>
@Html.HiddenFor(x => @Model[i].CuentaID, new { @id = "CuentaID_" + i })
</tr>
}
}
</tbody>
</table>
Pero no me aparecen las filas de detalle y al pulsar en la "empresa" no se despliegan tampoco.