Bagaimana untuk Kembangkan dan Runtuhkan Baris Jadual dengan jQuery?

Kembangkan dan Runtuhkan Baris Jadual dengan jQuery

Masalah:

Kembangkan dan runtuhkan baris jadual apabila lajur pengepala tertentu diklik, mengehadkan pengembangan/runtuhkan kepada baris di bawah pengepala yang diklik.

Penyelesaian Cadangan:

1. Kenalpasti Pengepala Baris: Tambahkan kelas, seperti "pengepala," pada baris pengepala.
2. Togol Pengembangan/Runtuh: Gunakan kaedah .nextUntil() jQuery untuk memilih semua baris di bawah pengepala diklik sehingga pengepala seterusnya ditemui. Kemudian, gunakan .slideToggle() untuk menogol keterlihatan baris ini.

Snippet Kod:

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

Struktur HTML:

<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>

Ciri-ciri Tambahan:

• Ikon Kembangkan/Runtuhkan: Gunakan elemen span dalam sel pengepala untuk memaparkan kembangkan atau runtuhkan ikon. Kemas kini ikon berdasarkan keadaan semasa.
• Penggunaan Promise: Gunakan kaedah .promise() jQuery untuk mengendalikan operasi tak segerak, seperti animasi.
• CSS Elemen Pseudo: Gunakan elemen pseudo CSS untuk mewakili penunjuk pengembangan/runtuhkan dan togol kelas pada pengepala untuk mengawal keterlihatan.

Atas ialah kandungan terperinci Bagaimana untuk Kembangkan dan Runtuhkan Baris Jadual dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!