隱藏和顯示表格中的行

Question

我打算有一個最初顯示現有預算的表格。 然后，如果您想查看預算的內容，那么我單擊第一列中的按鈕，它會顯示屬於每個預算的內容。 我正在這樣做，如下例所示：

 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>

我遇到的問題是，當我單擊第一列中的按鈕查看預算 1 的內容時，它會顯示預算 1 和預算 2 的信息。

我打算在單擊預算 1 按鈕時，只顯示屬於預算 1 的行，依此類推。

有人可以幫助我上面提到的示例，或者建議一些不同但功能相同的東西嗎？

Answer 1

這里的問題出在你的循環中，它遍歷了cars1的鍵：

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

在這個循環中，您遍歷cars1 object 中的所有鍵，並為每個鍵在表中創建一行。

相反，為了達到您的目標，您應該攔截用戶對按鈕的點擊，然后顯示一行包含該預算的詳細信息。

您可以使用data-屬性來了解哪個預算用戶點擊了。