Sembunyikan / Tampilkan Kolom di Tabel HTML

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>

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.

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 .

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 .

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.

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 Bekerja di jsFiddle & Stack Snippets:

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

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

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <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>
      </th>
      <th class="hide-col">
        Action
        <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>
      </th>
      <th>
        Type
        <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>
      </th>
      <th>
        Attributes
        <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>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

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

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 ...

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>

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

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';