5

Como posso fazer nested tables com o bootstrap como neste exempo com ASP.Net?

inserir a descrição da imagem aqui

Há forma de fazer isso com bootstrap?

2
  • 1
    Jorge, não sei qual sua necessidade, linguagem e etc. Mas já deu uma olhada no DataTables. Tipo este exemplo: Row Detail. Ele possui uma camada de configuração para Bootstrap 3. 17/02/2016 às 13:45
  • @FernandoA.W. é só mesmo HTML com Bootstrap.
    – Jorge B.
    17/02/2016 às 14:01

2 Respostas 2

8

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>

1
  • Funciona às mil maravilhas.
    – Jorge B.
    3/03/2016 às 11:38
5

No caso o Bootstrap requer jQuery, então você pode usar jQuery, apenas é preciso aportar o elemento com $(...).next().

Exemplo:

$(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>

Exemplo 2:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .