Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Togol Keterlihatan Baris Jadual dengan Klik Pengepala menggunakan jQuery dan CSS?

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

DDD
DDDasal
2024-11-03 13:24:30303semak imbas

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>

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>
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

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!

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