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 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 1

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.