使用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><code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
$this.find('span').text(function (_, value) {
return value == '-' ? '+' : '-'
});
});</code><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>以上是如何使用 jQuery 動態展開和折疊表行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
