如何使用 jQuery 動態展開和折疊表行？

使用jQuery 動態展開和折疊表格行

問題：

問題：

展開或表格點擊特定列標題時的行會帶來挑戰。為了簡化此任務，可以使用自訂 CSS 類別來區分每個標題中的行。但是，管理多個標頭的多個 CSS 類別可能會變得很麻煩。

解決方案：

為了避免追蹤多個 CSS 類別的複雜性，另一個方法是利用 nextUntil( ) jQuery 中的方法。此方法會擷取點擊的標題行之後的所有行，直到遇到下一個標題行。

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

程式碼片段：

<code class="html"><table border="0">
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

HTML 結構：

範例：

在此範例中，類別「header」被指派給標題行。當您按一下標題行時，使用 SlideToggle() 方法，緊鄰其下方的行會在隱藏和可見之間切換。

• 其他功能：

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

您可以在標題行中使用span 元素來顯示「」或「-」符號，該符號正在展開或折疊行後切換：

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

切換span切換完成後非同步圖示/文本，使用slideToggle()方法的promise()：

<code class="css">.header .sign:after{
    content:"+";
    display:inline-block;      
}
.header.expand .sign:after{
    content:"-";
}</code>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

或者，使用CSS偽元素來表示展開/折疊在標題上簽名並切換類別：

以上是如何使用 jQuery 動態展開和折疊表行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！