Bagaimana untuk Menyembunyikan atau Menunjukkan Lajur Jadual dengan Nama Menggunakan jQuery?

Cara Menyembunyikan atau Menunjukkan Lajur Jadual Tertentu dengan Namanya dengan jQuery

Memilih elemen mengikut kelas menggunakan jQuery adalah mudah. Walau bagaimanapun, jika anda ingin menyasarkan elemen mengikut atribut namanya, anda mungkin menghadapi hasil yang tidak dijangka. Artikel ini menunjukkan cara untuk menyembunyikan dan menunjukkan lajur jadual tertentu menggunakan pemilih atribut jQuery.

Pertimbangkan jadual HTML berikut, di mana lajur kedua mempunyai nama yang sama, "tcol1," untuk semua baris:

<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>

Menggunakan pemilih kelas, kita boleh menyembunyikan lajur kedua dengan mudah:

$(".bold").hide();

Walau bagaimanapun, cuba untuk menyembunyikan lajur kedua dengan namanya menggunakan kaedah pemilihan lalai tidak berfungsi:

$("tcol1").hide();

Untuk memilih elemen mengikut namanya, jQuery menyediakan pemilih atribut. Contoh kod berikut menunjukkan cara untuk memilih dan menyembunyikan lajur kedua menggunakan pemilih atribut:

$('td[name="tcol1"]') .hide();

Selain itu, pemilih atribut menawarkan pelbagai pilihan untuk memadankan atribut nama yang berbeza:

• $('td[name="tcol1"]'): Padan dengan nama yang tepat "tcol1"
• $('td[name^="tcol"]'): Memadankan nama yang bermula dengan "tcol"
• $(' td[name$="tcol"]'): Memadankan nama yang berakhir dengan "tcol"
• $('td[name*="tcol"]'): Memadankan nama yang mengandungi "tcol" di mana-mana sahaja

Dengan menggunakan pemilih atribut, anda boleh menyasarkan dan memanipulasi elemen tertentu dengan cekap berdasarkan atribut namanya, membolehkan anda mengembangkan atau menyembunyikan lajur yang dikehendaki dengan mudah dalam ini kes.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan atau Menunjukkan Lajur Jadual dengan Nama Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!