Masquer / Afficher la colonne dans un tableau HTML

J'ai une table HTML avec plusieurs colonnes et je dois implémenter un sélecteur de colonne en utilisant jquery. Lorsqu'un utilisateur clique sur une case à cocher, je souhaite masquer / afficher la colonne correspondante dans le tableau. Je voudrais faire cela sans attacher une classe à chaque td de la table, existe-t-il un moyen de sélectionner une colonne entière à l'aide de jquery? Ci-dessous, un exemple du 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>

Je voudrais faire cela sans attacher une classe à chaque td

Personnellement, j'irais avec l'approche class-on-each-td / th / col. Ensuite, vous pouvez activer et désactiver les colonnes en utilisant une seule écriture dans className sur le conteneur, en supposant des règles de style telles que:

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

Cela va être plus rapide que n'importe quelle approche de boucle JS; pour de très longues tables, cela peut faire une différence significative en termes de réactivité.

Si vous parvenez à ne pas prendre en charge IE6, vous pouvez utiliser des sélecteurs de contiguïté pour éviter d'avoir à ajouter les attributs de classe à tds. Ou bien, si votre souci est de nettoyer le balisage, vous pouvez les ajouter automatiquement à partir de JavaScript lors d'une étape d'initialisation.

Une ligne de code utilisant jQuery qui masque la 2ème colonne:

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

Si votre table a un en-tête (th), utilisez ceci:

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

Source: Masquer une colonne de table avec une seule ligne de code jQuery

jsFiddle pour tester le code: http://jsfiddle.net/mgMem/1/

Si vous voulez voir un bon cas d'utilisation, jetez un œil à mon article de blog:

Cachez une colonne de table et colorisez les lignes en fonction de la valeur avec jQuery .

vous pouvez utiliser des colgroups:

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

votre script pourrait alors changer simplement la <col>classe désir .

Ce qui suit devrait le faire:

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

Il s'agit d'un code non testé, mais le principe est que vous choisissez la cellule du tableau dans chaque ligne qui correspond à l'index choisi extrait du nom de la case à cocher. Vous pouvez bien sûr limiter les sélecteurs avec une classe ou un identifiant.

Voici une réponse un peu plus complète qui fournit une interaction de l'utilisateur par colonne. Si cela doit être une expérience dynamique, il doit y avoir une bascule cliquable sur chaque colonne qui indique la possibilité de masquer la colonne, puis un moyen de restaurer les colonnes précédemment masquées.

Cela ressemblerait à quelque chose comme ceci en 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()

})

Pour prendre en charge cela, nous ajouterons du balisage à la table. Dans chaque en-tête de colonne, nous pouvons ajouter quelque chose comme celui-ci pour fournir un indicateur visuel de quelque chose de cliquable

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

Nous autoriserons l'utilisateur à restaurer les colonnes via un lien dans le pied de page du tableau. S'il n'est pas persistant par défaut, l'activer dynamiquement dans l'en-tête pourrait se bousculer autour de la table, mais vous pouvez vraiment le placer où vous le souhaitez:

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

C'est la fonctionnalité de base. Voici une démo ci-dessous avec quelques détails supplémentaires. Vous pouvez également ajouter une info-bulle au bouton pour aider à clarifier son objectif, styliser le bouton un peu plus organiquement dans un en-tête de tableau et réduire la largeur de la colonne afin d'ajouter des animations css (un peu bancales) pour rendre la transition un peu moins nerveux.

Démonstration de travail dans 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>

Et bien sûr, le seul moyen CSS pour les navigateurs prenant en charge nth-child :

table td:nth-child(2) { display: none; }

Ceci est pour IE9 et plus récent.

Pour votre cas d'utilisation, vous aurez besoin de plusieurs classes pour masquer les colonnes:

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

ect ...

Ce qui suit s'appuie sur le code d'Eran, avec quelques modifications mineures. Je l'ai testé et il semble fonctionner correctement sur 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>

Sans cours? Vous pouvez alors utiliser le Tag:

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

Et pour leur montrer, utilisez:

...style.display = 'table-cell';