1.純css方案使用details和summary標簽實現折疊展開，無需JavaScript，但兼容性較差；2.javascript通過切換類名控制顯示隱藏，靈活且兼容性好，但需編寫腳本；3.借助jquery等庫可簡化代碼，但依賴外部框架。優化用戶體驗可通過添加動畫、狀態保持、無障礙支持等方式實現。復雜表格可采用遞歸、樹形數據結構或組件化管理。移動端適配需注重響應式設計、操作簡化和性能優化。
html表格數據的折疊展開，簡單來說，就是控制表格行（
實現表格數據折疊展開的方法有很多，主要圍繞著css和JavaScript展開，具體選哪種，取決于你的項目需求和技術棧。
解決方案
-
純CSS方案（借助details和summary標簽）：
立即學習“前端免費學習筆記（深入）”；
這是一種比較現代且語義化的方法，不需要JavaScript。核心在于使用
和標簽。
標簽的內容會始終顯示，點擊后會展開或折疊
標簽內的內容。
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>詳情</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>30</td> <td> <details> <summary>點擊查看詳情</summary> <p>聯系方式：138xxxxxxxx</p> <p>地址：北京市海淀區</p> </details> </td> </tr> <tr> <td>李四</td> <td>25</td> <td> <details> <summary>點擊查看詳情</summary> <p>聯系方式：139xxxxxxxx</p> <p>地址：上海市浦東新區</p> </details> </td> </tr> </tbody> </table>
優點： 無需JavaScript，簡單易用，語義化好。
缺點： 樣式定制可能稍微麻煩一些，兼容性方面，老版本瀏覽器可能不支持。
-
JavaScript控制CSS類名：
這是比較常見的做法，通過JavaScript監聽點擊事件，然后切換表格行的CSS類名，控制其顯示或隱藏。
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>30</td> <td><button class="toggle-btn" data-target="detail-1">展開/折疊</button></td> </tr> <tr class="detail-row" id="detail-1"> <td colspan="3"> <p>聯系方式：138xxxxxxxx</p> <p>地址：北京市海淀區</p> </td> </tr> <tr> <td>李四</td> <td>25</td> <td><button class="toggle-btn" data-target="detail-2">展開/折疊</button></td> </tr> <tr class="detail-row" id="detail-2"> <td colspan="3"> <p>聯系方式：139xxxxxxxx</p> <p>地址：上海市浦東新區</p> </td> </tr> </tbody> </table> <style> .detail-row { display: none; /* 初始隱藏 */ } .detail-row.show { display: table-row; /* 顯示 */ } </style> <script> const toggleButtons = document.querySelectorAll('.toggle-btn'); toggleButtons.forEach(button => { button.addEventListener('click', () => { const targetId = button.dataset.target; const detailRow = document.getElementById(targetId); detailRow.classList.toggle('show'); }); }); </script>
優點： 靈活，可以自定義各種動畫效果，兼容性好。
缺點： 需要編寫JavaScript代碼。
-
使用JavaScript庫或框架：
如果你的項目已經使用了jQuery、React、vue等庫或框架，那么可以利用它們提供的功能來簡化折疊展開的實現。例如，jQuery可以使用slideToggle()方法，React和Vue可以使用條件渲染。
jQuery示例：
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>30</td> <td><button class="toggle-btn" data-target="#detail-1">展開/折疊</button></td> </tr> <tr class="detail-row" id="detail-1"> <td colspan="3"> <p>聯系方式：138xxxxxxxx</p> <p>地址：北京市海淀區</p> </td> </tr> </tbody> </table> <style> .detail-row { display: none; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.toggle-btn').click(function() { const target = $(this).data('target'); $(target).slideToggle(); }); }); </script>優點： 簡化代碼，利用現有庫或框架的功能。
缺點： 依賴于外部庫或框架。
如何優化表格折疊展開的用戶體驗？
優化用戶體驗，不僅僅是實現功能，還要考慮細節。
- 動畫效果： 使用平滑的動畫效果，例如slideDown()和slideUp()，而不是直接顯示/隱藏，可以提升用戶體驗。
- 狀態保持： 記錄用戶的展開/折疊狀態，下次訪問頁面時恢復之前的狀態。可以使用localStorage或Cookie來實現。
- 無障礙訪問： 確保折疊展開功能對屏幕閱讀器等輔助技術友好。可以使用aria-expanded屬性來指示元素的展開狀態。
- 性能優化： 如果表格數據量很大，可以考慮使用虛擬滾動等技術來優化性能。避免一次性渲染所有數據。
如何處理復雜表格的折疊展開？
復雜表格可能包含多層嵌套的折疊展開。
- 遞歸實現： 可以使用遞歸的方式來處理多層嵌套的折疊展開。
- 數據結構設計： 合理設計數據結構，例如使用樹形結構，可以方便地管理和控制折疊展開狀態。
- 組件化： 將折疊展開功能封裝成獨立的組件，方便復用和維護。
折疊展開表格在移動端如何適配？
移動端屏幕空間有限，更需要考慮折疊展開的適配。
- 響應式設計： 使用CSS媒體查詢，根據屏幕尺寸調整表格的布局和樣式。
- 簡化操作： 減少不必要的操作，例如可以使用手勢滑動來展開/折疊。
- 優化性能： 移動端設備的性能相對較弱，需要更加注意性能優化。
