Hide and show rows in a table

Question

I intend to have a table that initially shows the existing budgets. Then if you want to see the content of the budget, I click on the button in the first column and show what belongs to each budget. I am doing this as shown in the example below:

var cars = [
   {Cliente:  "teste", Orcamento:  "1",},
   {Cliente:  "teste1", Orcamento:  "2",},
];

var cars1 = [
   {Designacao:  "teste", Quantidade:  "2", Orcamento:  "1",},
   {Designacao:  "teste1", Quantidade:  "3", Orcamento:  "1",},
   {Designacao:  "teste2", Quantidade:  "1", Orcamento:  "2",},
   {Designacao:  "teste3", Quantidade:  "4", Orcamento:  "2",},
];

var linha = ``;

Object.keys(cars).forEach(i=>{
        Cliente = cars[i].Cliente;
        Orcamento = cars[i].Orcamento;
        
        
linha += `
       <tr class="table__row accordion-toggle">
       <td><button type="button" class="btn btn-default btn-sm" data-toggle="collapse" data-target=".demo01"><i class="fas fa-angle-down"></i></button></td>
       <td class="table__content" data-heading="Cliente"> ${ Cliente }</td>
       <td class="table__content" data-heading="Orcamento"> ${ Orcamento }</td>
       </tr>`;
}) 

linha += `
<tr>
        <td colspan="12" class="hiddenRowww">
        <div class="accordian-body collapse demo01" > 
        
        <table class="table">
        <thead>
        <tr class="info">
        <th  class="table__heading">Designação</th>
        <th  class="table__heading">Quantidade</th>     
        <th  class="table__heading">Orcamento</th>
        </tr>
        </thead`;
    
Object.keys(cars1).forEach(i=>{
    Designacao = cars1[i].Designacao;
    Quantidade = cars1[i].Quantidade;
    Orcamento = cars1[i].Orcamento;
    
linha += `
        <tbody>
        <tr data-toggle="collapse"  class="accordion-toggle table__row" data-target="#demo10">
            <td class="table__content" data-heading="Designacao">${ Designacao }</td>
            <td class="table__content" data-heading="Quantidade">${ Quantidade }</td>
            <td class="table__content" data-heading="Orcamento">${ Orcamento }</td>
      </tr>
        </tbody>`; 
 }) 
        
linha += `</table>
        </div>
        </td>
        </tr>`;
 

$("#taborc tbody").html(linha);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="taborc" class="table">
  <thead> 
    <tr> 
      <th class="table__heading"><i class="fas fa-list"></i></th>
      <th class="table__heading">Cliente</th>
      <th class="table__heading">Nº Orcamento</th> 
    </tr>
  </thead>
  <tbody>

  </tbody>
</table> 

The problem I have is that when I click the button in the first column to see the content of budget 1, it shows the information of budget 1 and budget 2.

I intend that by clicking on the budget line 1 button, show only the lines that belong to budget 1 and so on. But that’s not what’s happening.

Anyone can help?

Answer 1

Good afternoon,

possibly if you return your data from an API, they will come chained, as in the example Cars object below, so in this case, I am traversing it, and at each node son of designations, I play in a separate table that will be shown when you click the button +.

var cars = [
  {
    Cliente: "teste",
    Orcamento: 1,
    Designacoes: [
      {
        Designacao: "teste",
        Quantidade: 2,
        Orcamento: 1
      },
      {
        Designacao: "teste1",
        Quantidade: 3,
        Orcamento: 1
      }
    ]
  },
  {
    Cliente: "teste1",
    Orcamento: 2,
    Designacoes: [
      {
        Designacao: "teste2",
        Quantidade: 1,
        Orcamento: 2
      },
      {
        Designacao: "teste3",
        Quantidade: 4,
        Orcamento: 2
      }
    ]
  }
];


$(document).ready(function () {
  cars.forEach(orcamento => {
    // Linha orçamento
    var tr = document.createElement('tr');

    var td = document.createElement('td');
    var btn = document.createElement('button');
    btn.onclick = () => {
      $("#tr_orc_" + orcamento.Orcamento).toggle();
    };
    btn.appendChild(document.createTextNode('+'));
    td.appendChild(btn);
    tr.appendChild(td);

    var td = document.createElement('td');
    td.appendChild(document.createTextNode(orcamento.Cliente));
    tr.appendChild(td);

    td = document.createElement('td');
    td.appendChild(document.createTextNode(orcamento.Orcamento));
    tr.appendChild(td);

    document.getElementById('myTableBody').appendChild(tr);

    // Linha designação
    var tr = document.createElement('tr');
    tr.id = 'tr_orc_' + orcamento.Orcamento;
    tr.style.cssText = 'display: none';

    // Caso queira dar espaçamento na table fila, descomentar as duas linhas abaixo
    //var td = document.createElement('td');
    //tr.appendChild(td);

    // Table com a designação
    table = document.createElement('table');
    table.className = 'table table-bordered';

    // Tr que vai receber a tabela filha
    var trChild = document.createElement('tr');

    // Cria os títulos
    var thChild = document.createElement('th');
    thChild.appendChild(document.createTextNode('Designação'));
    trChild.appendChild(thChild);

    thChild = document.createElement('th');
    thChild.appendChild(document.createTextNode('Quantidade'));
    trChild.appendChild(thChild);

    // Atribui o trChild para o theadChild
    var theadChild = document.createElement('thead');
    theadChild.appendChild(trChild);

    // Adiciona o theadChild a tabela filha
    table.appendChild(theadChild);
    var tbodyChild = document.createElement('tbody');

    // percorre as designacoes para poder criar as linhas da tabela filha
    orcamento.Designacoes.forEach(designacao => {
      var trChild = document.createElement('tr');

      var tdChild = document.createElement('td');
      tdChild.appendChild(document.createTextNode(designacao.Designacao));
      trChild.appendChild(tdChild);

      tdChild = document.createElement('td');
      tdChild.appendChild(document.createTextNode(designacao.Quantidade));
      trChild.appendChild(tdChild);

      tbodyChild.appendChild(trChild);
    });

    // cria a td da tabela mãe para comportar a tabela filha
    td = document.createElement('td');
    // Caso queira dar espaçamento na table fila, alterar o colSpan para 2
    td.colSpan = 3;
    // Adiciona o tbodyChild na tabela filha
    table.appendChild(tbodyChild);
    // Adiciona a tabela filha na coluna da tabela mãe
    td.appendChild(table);
    // Adiciona a td da tabela mãe na tr
    tr.appendChild(td);
    // Adiciona a tr no tbody da tabela mãe
    document.getElementById('myTableBody').appendChild(tr);
  });
});

<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>
    
    
    <div class="">
        <table id="taborc" class="table table-bordered table-striped table-hover table-condensed">
        <thead> 
            <tr> 
                <th class="table__heading"><i class="fas fa-list"></i></th>
                <th class="table__heading">Cliente</th>
                <th class="table__heading">Nº Orcamento</th> 
            </tr>
        </thead>
        <tbody id="myTableBody">
        </tbody>
        </table>
    </div>