Bagaimana untuk menyembunyikan sub-baris dalam jadual jquery

Dalam pembangunan laman web, jadual selalunya merupakan bentuk biasa untuk memaparkan data. Walau bagaimanapun, kadangkala kita perlu membenamkan sub-baris dalam jadual untuk memaparkan data terperinci. Jika kita tidak mahu semua subrows ini dikembangkan pada mulanya, maka kita perlu melaksanakan kaedah yang menyembunyikan subrows dan menunjukkannya apabila diperlukan.

Nasib baik, jQuery menyediakan kaedah yang sangat mudah untuk membantu kami mencapai fungsi ini Seterusnya, kami akan menggunakan beberapa kod mudah untuk melaksanakan jadual jQuery yang boleh menyembunyikan dan memaparkan sub-baris.

HTML diperlukan

Dalam contoh ini, kami akan menggunakan jadual ringkas untuk memaparkan beberapa data. Jadual terdiri daripada dua bahagian utama: pengepala dan badan. Antaranya, bahagian badan jadual mengandungi data yang kami perlukan untuk menambah sub-baris, di mana kami akan menambah beberapa baris baharu untuk memaparkan data terperinci.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

Sembunyikan baris anak

Mula-mula, kita perlu menambah baris baharu pada badan meja. Baris ini akan bertindak sebagai sub-baris, tersembunyi sehingga pengguna mengklik pada baris utama. Kami menggunakan kod HTML berikut untuk menambah baris baharu untuk memaparkan data terperinci tambahan:

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

Seperti yang anda lihat, kami menggunakan nama kelas expandable untuk menunjukkan bahawa baris baharu ini tersedia Fleksibel, dan kami menetapkan bilangan lajurnya kepada 4, supaya lebar subbaris akan sama dengan baris utama.

Kemudian, kami menyembunyikan baris baharu ini supaya pengguna tidak melihatnya apabila halaman dimuatkan. Kita boleh menggunakan kod CSS berikut untuk mencapai ini:

tr.expandable {
  display: none;
}

Sekarang kita telah berjaya menyembunyikan sub-baris apabila halaman web dimuatkan, kita perlu menambah beberapa kod untuk memaparkan sub-baris apabila baris utama diklik.

Tunjukkan sub-baris

Dalam contoh ini, kami akan mengembangkan sub-baris dengan mengklik pada baris utama. Pada ketika ini kami akan menggunakan jQuery dan menggunakan fungsi click() untuk memantau acara klik pengguna Pada masa ini, kami boleh mengembangkan dan meruntuhkan sub-baris yang sepadan dengan baris utama.

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

Kami menggunakan $(document).ready() untuk memastikan semua elemen dalam halaman telah dimuatkan sepenuhnya, dan kemudian memantau acara click() untuk keseluruhan objek jadual. Apabila pengguna mengklik pada baris jadual, kami akan mendapat kandungan baris seterusnya, iaitu subbaris boleh dikembangkan yang kami tambahkan terlebih dahulu dan mengembangkan atau meruntuhkannya melalui fungsi toggle() jQuery.

Dengan kod di atas, kita boleh merealisasikan fungsi mengembangkan sub-baris.

Ringkasan

Dalam artikel ini, kami menunjukkan cara menggunakan jQuery untuk melaksanakan subbaris dalam jadual dan mengembangkan serta meruntuhkannya. Dengan menambahkan kod HTML dan CSS dinamik, kami berjaya menyembunyikan subbaris dan memaparkannya apabila pengguna mengklik pada baris utama. Langkah-langkah mudah ini boleh digunakan dengan mudah untuk pembangunan sebarang bentuk tapak web, membawa pengalaman pengguna yang lebih baik ke tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan sub-baris dalam jadual jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!