Hide and show rows in a table

I intend to have a table that initially shows the existing budgets. Then if you want to see the content of the budget then I click the button in the first column and it shows what belongs to each budget. I’m doing this as I show 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 contents of budget 1, it shows the information for budget 1 and budget 2.

I intend that when clicking on the budget 1 button, show me only the lines that belong to budget 1 and so on.

can someone help with the example I put above or else suggested something different but with the same functionality?

Answer

The problem here is in your loop which iterates over cars1‘s keys:

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>`; 
});

In this loop you iterates over all the keys in cars1 object and for each one of them you create a row in the table.

To reach your goal, instead, you should intercept user’s click on the button and then display a single row with the details of that budget.

You can use data- attributes to know which budget user has clicked.

Advertisement

Answer