Sembunyikan / Tampilkan Kolom di Tabel HTML


146

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>

2
Saya harap situs berikut akan membantu: fiendish.demon.co.uk/html/javascript/hidetablecols.html

Saya menerapkan solusi ini menggunakan jQuery, dan itu berfungsi dengan baik untuk saya: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Aaron

1
Per komentar pengguna344059, inilah arsip web untuk tautan yang rusak http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Jawaban:


84

Saya ingin melakukan ini tanpa melampirkan kelas untuk setiap td

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:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

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.


7
Terima kasih atas sarannya, saya ingin menjaga kebersihan HTML, tetapi kinerja jelas menjadi masalah karena ukuran tabel mendekati 100 baris. Solusi ini, memberikan peningkatan kinerja 2-5x.
Brian Fisher

2
Pendekatan ini berhasil bagi saya, dari segi kinerja. Terima kasih!
axelarge

4
Saya menambahkan ini ke css saya .hidden {display:none;}dan digunakan .addClass('hidden')dan .removeClass('hidden')yang sedikit lebih cepat daripada .hide()dan .show().
styfle

247

Satu baris kode menggunakan jQuery yang menyembunyikan kolom ke-2:

$('td:nth-child(2)').hide();

Jika tabel Anda memiliki tajuk (th), gunakan ini:

$('td:nth-child(2),th:nth-child(2)').hide();

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 .


1
Selain mereka yang tidak ada dalam contoh, apakah tidak ada masalah bahwa ini mengabaikan colspans? Bagus jika Anda tidak menggunakannya. Ada pertanyaan lain yang terkait: stackoverflow.com/questions/1166452/…
Kim R

2
Saya harus menambahkan tbody ke pemilih untuk menghindari menyembunyikan footer dengan pager: $ ('. Webgrid tbody td: nth-child (1), .webgrid th: nth-child (1)'). Hide ();
Alex

@KimR Ini mungkin membantu untuk masalah colspan stackoverflow.com/questions/9623601/…
yunzen

Saya tidak tahu persis mengapa, tetapi saya harus menggunakan 'tipe-n' sebagai gantinya, untuk membuatnya bekerja. Sebagai contoh: $ ('table td: nth-of-type (2)'). Hide ();
Leopoldo Sanczyk

@LeopoldoSanczyk Anda menggunakan Safari? Sepertinya itu perlu jenis-n
ykay kata Reinstate Monica

12

Anda bisa menggunakan colgroup:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <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>

skrip Anda kemudian dapat mengubah hanya <col>kelas keinginan .


Sepertinya saya ingat colgroup tidak memiliki dukungan lintas browser, apakah itu tidak benar lagi?
Brian Fisher

Mungkin. Saya menggunakan metode ini untuk kolom hilight, (firefox, safari, chrome berfungsi dengan baik) tidak pernah mencobanya di IE.
Luis Melgratti

@Brian - IE8 tidak berfungsi dan IE8 dengan IE7 diaktifkan tampaknya berfungsi.
Nordes

4
Ini sepertinya tidak berfungsi lagi di browser modern (Chrome dan Firefox)
JBE

@JBE: tepatnya, ini tidak bekerja di browser modern sampai batas tertentu . Menggunakan $('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 .
Bass

11

Yang berikut harus melakukannya:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

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.


11

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:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

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

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

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 Screengrab

Demo Bekerja di jsFiddle & Stack Snippets:


Anda menyembunyikan 1 kolom terdekat, bagaimana cara menyembunyikan 3 kolom terdekat?
Nirmal Goswami

periksa meja saya - i.stack.imgur.com/AA8iZ.png dan pertanyaan yang berisi tabel html - stackoverflow.com/questions/50838119/… tombol akan muncul setelah A, B dan C
Nirmal Goswami

maaf menghidupkan kembali jawaban lama seperti itu, tetapi apakah ada cara mudah untuk mengatur kolom tertentu agar disembunyikan secara default? Saya mencoba melakukannya dengan $(document).readytetapi tidak berhasil
RobotJohnny

1
@RobotJohnny, pertanyaan bagus. Ini menggunakan kelas .hide-coluntuk menghapus kolom, tetapi juga dapat digunakan untuk menunjukkan status juga, sehingga Anda bisa - menambahkan .hide-colke masing-masing td& trsaat 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 kalkun
KyleMit

1
@RobotJohnny, saya memperbarui sampel kode untuk memasukkan inisialisasi penanganan juga. Letakkan class='hide-col'saja di mana saja yang Anda inginkan di html Anda (mungkin di thead > tr > thbagian paling masuk akal dan akan mengambilnya untuk memastikan ia menyembunyikan semua sel di kolom itu dan secara dinamis juga menampilkan catatan kaki pemulihan
KyleMit

4

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

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

dll ...


2

Berikut ini adalah pengembangan dari kode Eran, dengan beberapa perubahan kecil. Mengujinya dan tampaknya berfungsi baik di Firefox 3, IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<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>
</body>
</html>

1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

0

Tanpa kelas? Anda dapat menggunakan Tag lalu:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

Dan untuk menunjukkan kepada mereka gunakan:

...style.display = 'table-cell';            
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.