Bagaimana untuk Mengembangkan/Meruntuhkan Baris Jadual dengan jQuery?

Kembangkan/Rutuhkan Baris Jadual dengan jQuery

Membesar dan meruntuhkan baris jadual berdasarkan klik pengepala ialah keperluan biasa dalam reka bentuk web. Dalam artikel ini, kami akan meneroka cara untuk mencapai ini menggunakan jQuery.

Memandangkan struktur jadual berikut:

<code class="html"><table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

Kita boleh mendekati tugas ini dengan memberikan kelas unik kepada setiap baris pengepala. Apabila pengepala diklik, kita boleh menggunakan kaedah nextUntil untuk memilih semua baris di bawahnya sehingga pengepala seterusnya. Ini membolehkan kami meruntuhkan atau mengembangkan hanya baris yang berkaitan berdasarkan pengepala yang telah diklik.

Berikut ialah coretan kod jQuery yang mudah untuk melaksanakan gelagat ini:

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

Dalam kod ini, kami lampirkan acara klik pada semua elemen dengan kelas pengepala. Apabila pengepala diklik, ia mencari semua baris berikutnya sehingga pengepala seterusnya dan menogol keterlihatannya menggunakan slideToggle.

Kaedah Alternatif

Pilihan lain ialah menggunakan kaedah togol dan bukannya slideToggle, yang menyediakan pelaksanaan yang lebih mudah:

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').toggle();
});</code>

Di sini, kami menogol kelas kembangkan pada pengepala yang diklik dan menogol paparan semua baris berikutnya menggunakan togol.

Akhir sekali, elemen pseudo CSS juga boleh digunakan untuk gambaran yang lebih visual bagi keadaan pengembangan/runtuh:

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

Dalam versi ini, kelas kembangkan juga menukar tanda yang dipaparkan oleh unsur pseudo CSS daripada tambah kepada tolak, memberikan petunjuk visual keadaan baris.

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