如何使用 jquery 展開/折疊表行？

Question

如果單擊 class='sector' 的行，我將嘗試展開/折疊以下行

根據其他stackoverflow答案，相同的代碼似乎對很多人都有效，但對我不起作用，我想知道為什么？ 我對 jquery 了解不多，但這在我看來是可行的，但仍然不起作用。

請給出一個簡單的解決方案

 $(document).ready(function() { $("td[colspan=2]").hide(); $("tr.sector").click(function() { $(this).next().toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table"> <tr> <td scope="col">Sector</th> <td scope="col">Total Qty</th> </tr> <tr class="sector"> <td>Sector no. 2</td> <td> M : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 5 | NPSC Apartment</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=5">Details</a></div> </div> </div> </p> </td> </tr> <tr class="sector"> <td>Sector no. 3</td> <td> M : 2, MJ : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=1">Details</a></div> </div> <div class="row"> <div class="col-4">Plot no. 8 | Himachali Apartment</div> <div class="col-4">2 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=8">Details</a></div> </div> </div> </p> </td> </tr> </table> </div> </div>

Answer 1

您將td[colspan=2]隱藏在tr並嘗試切換相同的tr而實際上不顯示您首先隱藏的td 。

所以你需要使用next來獲取下一個tr兄弟並在td[colspan=2]你已經隱藏並切換它。

請閱讀有關 Jquery 樹遍歷的文檔，下次注意您的 HTML 樹。 它的所有記錄都很好，並在提供的鏈接上進行了解釋。

 $(document).ready(function() { $("tr > td[colspan=2]").hide(); $("tr.sector").click(function() { $(this).next().find("td[colspan=2]").toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table"> <tr> <td scope="col">Sector</th> <td scope="col">Total Qty</th> </tr> <tr class="sector"> <td>Sector no. 2</td> <td> M : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 5 | NPSC Apartment</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=5">Details</a></div> </div> </div> </p> </td> </tr> <tr class="sector"> <td>Sector no. 3</td> <td> M : 2, MJ : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=1">Details</a></div> </div> <div class="row"> <div class="col-4">Plot no. 8 | Himachali Apartment</div> <div class="col-4">2 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=8">Details</a></div> </div> </div> </p> </td> </tr> </table> </div> </div>