Bagaimana untuk Togol Keterlihatan Baris Jadual dengan Klik Pengepala menggunakan jQuery dan CSS?

DDD
Lepaskan: 2024-11-03 13:24:30
asal
337 orang telah melayarinya

How to Toggle Table Row Visibility with Header Clicks using jQuery and CSS?

Kembangkan dan Runtuhkan Baris Jadual pada Klik Pengepala

Artikel ini menangani cabaran mengembangkan dan meruntuhkan baris jadual tertentu apabila lajur pengepala yang sepadan adalah diklik.

Jadual HTML yang disediakan terdiri daripada baris dengan bahagian pengepala berselang-seli. Untuk mencapai gelagat yang diingini, kami akan memanfaatkan kuasa jQuery.

Pendekatan jQuery

  1. Kenal pasti elemen pengepala: Gunakan kelas .header untuk menentukan yang mana baris jadual berfungsi sebagai pengepala.
  2. Togol keterlihatan: Selepas mengklik pengepala, gunakan kaedah nextUntil untuk memilih semua baris yang mengikuti pengepala itu sehingga pengepala seterusnya ditemui. Kaedah slideToggle kemudian mengembangkan atau meruntuhkan baris yang dipilih.

Coretan Kod

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

Pendekatan Alternatif Menggunakan CSS dan Elemen Pseudo

  1. Peraturan CSS: Tentukan elemen pseudo dengan sifat :selepas untuk mewakili tanda pengembangan/runtuhkan ( atau -).
  2. Togol Kelas CSS: Tetapkan 'expand ' kelas ke pengepala yang diklik dan togol paparannya berdasarkan keadaan unsur pseudo.

Codean Kod

<code class="css">.header .sign:after{
  content:"+";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
}</code>
Salin selepas log masuk
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>
Salin selepas log masuk

Ini pendekatan alternatif mengelakkan keperluan untuk menjejak berbilang kelas CSS, memudahkan pelaksanaan.

Atas ialah kandungan terperinci Bagaimana untuk Togol Keterlihatan Baris Jadual dengan Klik Pengepala menggunakan jQuery dan CSS?. 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