Saya punya tabel HTML dengan beberapa kolom dan saya perlu mengimplementasikan pemilih kolom menggunakan jquery. Ketika seorang pengguna mengklik pada kotak centang saya ingin menyembunyikan / menampilkan kolom yang sesuai dalam tabel. Saya ingin melakukan ini tanpa melampirkan kelas ke setiap td dalam tabel, apakah ada cara untuk memilih seluruh kolom menggunakan jquery? Di bawah ini adalah contoh dari HTML.
<table>
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>
<form>
<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
Jawaban:
Secara pribadi, saya akan pergi dengan pendekatan kelas-on-masing-td / th / col. Kemudian Anda bisa menghidupkan dan mematikan kolom menggunakan satu tulisan ke className pada wadah, dengan asumsi aturan gaya seperti:
Ini akan menjadi lebih cepat daripada pendekatan JS loop apa pun; untuk tabel yang sangat panjang dapat membuat perbedaan yang signifikan untuk responsif.
Jika Anda bisa lolos dengan tidak mendukung IE6, Anda bisa menggunakan pemilih adjacency untuk menghindari harus menambahkan atribut kelas ke tds. Atau sebagai alternatif, jika kekhawatiran Anda adalah membuat pembersih markup, Anda dapat menambahkannya dari JavaScript secara otomatis dalam langkah inisialisasi.
sumber
.hidden {display:none;}
dan digunakan.addClass('hidden')
dan.removeClass('hidden')
yang sedikit lebih cepat daripada.hide()
dan.show()
.Satu baris kode menggunakan jQuery yang menyembunyikan kolom ke-2:
Jika tabel Anda memiliki tajuk (th), gunakan ini:
Sumber: Sembunyikan Kolom Tabel dengan satu baris kode jQuery
jsFiddle untuk menguji kode: http://jsfiddle.net/mgMem/1/
Jika Anda ingin melihat kasus penggunaan yang baik, lihat posting blog saya:
Sembunyikan kolom tabel dan warnai baris berdasarkan nilai dengan jQuery .
sumber
Anda bisa menggunakan colgroup:
skrip Anda kemudian dapat mengubah hanya
<col>
kelas keinginan .sumber
$('table > colgroup > col.yourClassHere')
pemilih jQuery, Anda masih dapat menetapkan sesuatu seperti warna latar belakang seluruh kolom, tetapi Anda tidak lagi dapat beralih visibilitas kolom. Browser yang diuji adalah MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 . "Sebagian besar atribut dalam HTML 4.01 tidak didukung dalam HTML5" - lihat di sini .Yang berikut harus melakukannya:
Ini adalah kode yang belum diuji, tetapi prinsipnya adalah Anda memilih sel tabel di setiap baris yang sesuai dengan indeks yang dipilih yang diekstrak dari nama kotak centang. Anda tentu saja dapat membatasi pemilih dengan kelas atau ID.
sumber
Inilah jawaban yang lebih berfitur lengkap yang menyediakan interaksi pengguna berdasarkan basis per kolom. Jika ini akan menjadi pengalaman yang dinamis, perlu ada toggle yang dapat diklik pada setiap kolom yang menunjukkan kemampuan untuk menyembunyikan kolom, dan kemudian cara untuk mengembalikan kolom yang sebelumnya tersembunyi.
Itu akan terlihat seperti ini di JavaScript:
Untuk mendukung ini, kami akan menambahkan beberapa markup ke tabel. Di setiap tajuk kolom, kita dapat menambahkan sesuatu seperti ini untuk memberikan indikator visual dari sesuatu yang dapat diklik
Kami akan memungkinkan pengguna untuk mengembalikan kolom melalui tautan di footer tabel. Jika tidak bertahan secara default, maka mengaktifkannya secara dinamis di header dapat berdesak-desakan di sekitar tabel, tetapi Anda dapat benar-benar meletakkannya di mana saja yang Anda inginkan:
Itulah fungsi dasar. Berikut ini demo di bawah ini dengan beberapa hal yang lebih baik. Anda juga dapat menambahkan tooltip ke tombol untuk membantu memperjelas tujuannya, memberi gaya tombol sedikit lebih organik ke header tabel, dan menutup lebar kolom untuk menambahkan beberapa animasi css (agak miring) untuk membuat transisi sedikit kurang gelisah.
Demo Bekerja di jsFiddle & Stack Snippets:
Tampilkan cuplikan kode
sumber
$(document).ready
tetapi tidak berhasil.hide-col
untuk menghapus kolom, tetapi juga dapat digunakan untuk menunjukkan status juga, sehingga Anda bisa - menambahkan.hide-col
ke masing-masingtd
&tr
saat merender html dan selesai. Atau jika Anda ingin menambahkannya di tempat yang lebih sedikit, letakkan di header (negara itu harus pergi ke suatu tempat), dan di init, gunakan itu untuk menyembunyikan indeks kolom itu di seluruh anak-anak. Saat ini, kodenya hanya mendengarkan posisi di klik, tetapi bisa dimodifikasi untuk mencari posisi kelas juga. Juga, selamat hari kalkunclass='hide-col'
saja di mana saja yang Anda inginkan di html Anda (mungkin dithead > tr > th
bagian paling masuk akal dan akan mengambilnya untuk memastikan ia menyembunyikan semua sel di kolom itu dan secara dinamis juga menampilkan catatan kaki pemulihanDan tentu saja, satu-satunya cara CSS untuk browser yang mendukung
nth-child
:table td:nth-child(2) { display: none; }
Ini untuk IE9 dan yang lebih baru.
Untuk usecase Anda, Anda perlu beberapa kelas untuk menyembunyikan kolom:
dll ...
sumber
Berikut ini adalah pengembangan dari kode Eran, dengan beberapa perubahan kecil. Mengujinya dan tampaknya berfungsi baik di Firefox 3, IE7.
sumber
sumber
Tanpa kelas? Anda dapat menggunakan Tag lalu:
Dan untuk menunjukkan kepada mereka gunakan:
sumber