How can I do nested tables with the bootstrap as in this example with ASP.Net ?
Is there a way to do this with bootstrap?
How to do nested tables with bootstrap?
4
asked by anonymous 17.02.2016 / 14:34
2 answers
5
Assuming you use jQuery you can do the following:
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><tableclass="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>
17.02.2016 / 15:54
5
In case Bootstrap requires jQuery, then you can use jQuery, you just need to bring the element with $(...).next() .
Example:
$(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><scriptsrc="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>Example 2:
Automatically close the other elements <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><scriptsrc="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>
17.02.2016 / 15:53