首頁 > web前端 > css教學 > 如何使用 jQuery 展開和折疊表行?

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

DDD
發布: 2024-11-03 10:10:03
原創
942 人瀏覽過

How to Expand and Collapse Table Rows with 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板