如何用jQuery實作動態表格行擴充？

使用jQuery 進行動態表行擴展

使用表格資料時，按需擴展和折疊行的能力可以大大增強用戶交互。在這種情況下，您尋求一種解決方案來在單擊特定標題列時實現此功能。

具有類別區分的方法

一種方法是分配唯一的類別屬於每個標題的行。當您按一下標題時，您可以使用 jQuery 來定位其關聯的行，並套用 slipToggle() 效果來展開或折疊它們。雖然這種方法很有效，但管理多個 CSS 類別可能會因為大量標頭而變得麻煩。

替代方法：nextUntil()

更簡單的替代方法是利用 jQuery 的 nextUntil() 函數。透過在標題行中新增「標題」類，您可以使用以下程式碼：

<code class="js">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

此函數可讓您遍歷點擊標題下方的表格行，直到遇到另一個標題。然後將 SlideToggle() 效果應用於匹配的行，提供所需的展開/折疊功能。

示範和變體

提供的 HTML 和 JavaScript 程式碼示範了這一點方法。另一個範例展示如何在標題中使用 span 元素來顯示“ ”或“-”圖示來指示展開/折疊。

為了獲得更動態的效果，您可以使用 Promise 來切換圖示/在動畫過渡的情況下，切換完成後的文字。

或者，可以使用 CSS 偽元素來表示展開/折疊符號。單擊標題時，標題上的類別會切換，表格行也會相應地展開或折疊。

這些技術提供了靈活且高效的方法來展開/折疊表格行以回應標題點擊。

以上是如何用jQuery實作動態表格行擴充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！