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

使用jQuery 展開與折疊表格行

問題：

問題：

問題：

1. 。當您按一下特定標題列時，將展開/折疊限制為按一下標題下方的行。
2. 建議的解決方案：

識別標題行： 在標題行中添加一個類，例如「header」。

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

切換展開/折疊：

使用 jQuery 的 .nextUntil() 方法選擇下面的所有行單擊標題直到遇到下一個標題。然後，使用 .slideToggle() 切換這些行的可見性。

<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 結構：
• 其他功能：
• 展開/折疊圖示：在標題儲存格中使用span 元素來顯示展開或折疊圖示。根據目前狀態更新圖示。

Promise 用法： 使用 jQuery 的 .promise() 方法處理非同步操作，例如動畫。 CSS偽元素： 利用 CSS 偽元素來表示展開/折疊指示器並切換標題上的類別來控制可見性。

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