Bagaimana untuk Kembangkan dan Runtuhkan Baris Jadual dengan jQuery?

DDD
Lepaskan: 2024-11-03 10:10:03
asal
921 orang telah melayarinya

How to Expand and Collapse Table Rows with 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan