5
How can I nested Tables with bootstrap as in this example with ASP.Net?
There is way to do this with bootstrap?
2 answers
8
Assuming the use of jQuery 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>
<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>-
Works like a charm.
5
In case Bootstrap requires jQuery, then you can use jQuery, just need to port 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>
<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>Example 2:
Automatically closes 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>
<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>Browser other questions tagged twitter-bootstrap bootstrap-3
You are not signed in. Login or sign up in order to post.
Jorge, I don’t know what your need is, language and so on. But you’ve already taken a look at Datatables. Like this example: Row Detail. It has a configuration layer for Bootstrap 3.
– Fernando A.W.
@Fernandoa.W. is just HTML with Bootstrap.
– Jorge B.