Como posso fazer nested tables com o bootstrap como neste exempo com ASP.Net?
Há forma de fazer isso com bootstrap?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeComo posso fazer nested tables com o bootstrap como neste exempo com ASP.Net?
Há forma de fazer isso com bootstrap?
Assumindo o uso de jQuery
pode fazer o seguinte:
function esconderLinha(idDaLinha) {
// procura o elemento com o ID passado para a função e coloca o estado para o contrario do estado actual
$("#" + idDaLinha).toggle();
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>
</th>
<th>
Contact Name
</th>
<th>
City
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button onClick="esconderLinha('linhaAEsconder')">
+
</button>
</td>
<td>Maria Anders</td>
<td>Berlin</td>
</tr>
<tr id="linhaAEsconder" style="display: none">
<td></td>
<td colspan="2">
<table class="table table-bordered">
<thead>
<tr>
<th>
Order Id
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
10643
</td>
<td>
8/25/1997 12:00:00 AM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
No caso o Bootstrap requer jQuery, então você pode usar jQuery, apenas é preciso aportar o elemento com $(...).next()
.
$(document).on("click", ".mytable .open", function() {
var tr = $(this).parents("tr").next();
if (tr.hasClass("hide")) {
tr.removeClass("hide");
} else {
tr.addClass("hide");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table mytable">
<thead>
<tr>
<th>x</th>
<th>y</th>
<th>z</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
</tbody>
</table>
Automaticamente fecha os outros elementos <tr>
:
$(document).on("click", ".mytable .open", function() {
var tr = $(this).parents("tr").next();
if (tr.hasClass("hide")) {
//Fecha todos outros tr antes de abrir o escolhido
$(".mytable .subcontent").addClass("hide");
//Abre o escolhido
tr.removeClass("hide");
} else {
tr.addClass("hide");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table mytable">
<thead>
<tr>
<th>x</th>
<th>y</th>
<th>z</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide subcontent">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide subcontent">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
<tr>
<td><button class="btn open">+</button></td>
<td>x</td>
<td>y</td>
</tr>
<tr class="hide subcontent">
<td></td>
<td colspan="2">Sua sub tabela deve vir aqui</td>
</tr>
</tbody>
</table>