Masquer / Afficher la colonne dans un tableau HTML

146

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>
Brian Fisher
la source
2
J'espère que le site folowing aiderait: fiendish.demon.co.uk/html/javascript/hidetablecols.html
J'ai implémenté cette solution en utilisant jQuery, et cela a parfaitement fonctionné pour moi: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Aaron
1
Par commentaire de user344059, voici l'archive Web pour le lien rompu http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Réponses:

84

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.

bobince
la source
7
Merci pour les conseils, j'avais voulu garder le HTML plus propre, mais les performances sont définitivement devenues un problème car la taille du tableau approchait de 100 lignes. Cette solution a permis une amélioration des performances de 2 à 5 fois.
Brian Fisher
2
Cette approche a fonctionné à merveille pour moi, en termes de performances. Merci!
axelarge
4
J'ai ajouté ceci à mon css .hidden {display:none;}et utilisé .addClass('hidden')et .removeClass('hidden')qui était un peu plus rapide que .hide()et .show().
styfle
247

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 .

Leniel Maccaferri
la source
1
En passant, car ils ne sont pas dans l'exemple, n'y a-t-il pas un problème que cela ignore les colspans? Bien si vous ne les utilisez pas. Il y a une autre question liée: stackoverflow.com/questions/1166452/…
Kim R
2
J'ai dû ajouter le tbody au sélecteur pour éviter de cacher le pied de page avec le pager: $ ('. Webgrid tbody td: nth-child (1), .webgrid th: nth-child (1)'). Hide ();
Alex
@KimR Cela peut aider pour les problèmes colspan stackoverflow.com/questions/9623601
...
Je ne sais pas exactement pourquoi, mais j'ai dû utiliser «nth-of-type» à la place, pour que cela fonctionne. Par exemple: $ ('table td: nth-of-type (2)'). Hide ();
Leopoldo Sanczyk
@LeopoldoSanczyk utilisiez-vous Safari? On dirait qu'il a besoin d'un nième de type
ykay dit Réintégrer Monica le
12

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 .

Luis Melgratti
la source
Il me semble me souvenir que colgroup n'avait pas de support multi-navigateurs, n'est-ce plus vrai?
Brian Fisher
Peut être. J'utilise cette méthode pour les colonnes hilight, (firefox, safari, chrome fonctionne bien) je ne l'ai jamais essayé dans IE.
Luis Melgratti
@Brian - IE8 ne fonctionne pas et IE8 avec IE7 activé semble fonctionner.
Nordes
4
Cela ne semble plus fonctionner dans les navigateurs modernes (Chrome et Firefox)
JBE
@JBE: pour être précis, cela fait le travail dans les navigateurs modernes dans une certaine mesure . En utilisant le $('table > colgroup > col.yourClassHere')sélecteur jQuery, vous pouvez toujours définir smth comme la couleur d'arrière-plan de toute la colonne, mais vous ne pouvez plus activer la visibilité de la colonne. Les navigateurs testés étaient MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 . "La plupart des attributs en HTML 4.01 ne sont pas pris en charge en HTML5" - voir ici .
Basse
11

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.

Eran Galperin
la source
11

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.

Capture d'écran de démonstration

Démonstration de travail dans jsFiddle & Stack Snippets:

KyleMit
la source
vous cachez 1 colonne la plus proche, comment masquer la colonne 3 la plus proche?
Nirmal Goswami
vérifiez ma table - i.stack.imgur.com/AA8iZ.png et la question qui contient le tableau html - stackoverflow.com/questions/50838119/... le bouton viendra après A, B et C
Nirmal Goswami
désolé de faire revivre une telle vieille réponse, mais existe-t-il un moyen simple de définir certaines colonnes sur masquées par défaut? J'essaie de le faire avec $(document).readymais je n'ai pas de chance
RobotJohnny
1
@RobotJohnny, bonne question. Cela utilise la classe .hide-colpour supprimer des colonnes, mais elle peut également être utilisée pour indiquer l'état, vous pouvez donc soit ajouter .hide-colà chaque td& trlors du rendu du html et être terminé. Ou si vous voulez l'ajouter à moins d'endroits, placez-le dans l'en-tête (cet état devra aller quelque part), et sur init, utilisez-le pour masquer cet index de colonne parmi les enfants. Actuellement, le code écoute simplement la position au clic, mais il pourrait être modifié pour rechercher également la position de classe. Aussi, bonne journée de la Turquie
KyleMit
1
@RobotJohnny, j'ai mis à jour l'exemple de code pour inclure également la gestion de l'initialisation. Déposez simplement class='hide-col'où vous voulez dans votre html (probablement dans le thead > tr > thsens le plus logique et il reprendra pour s'assurer qu'il masque toutes les cellules de cette colonne et affiche également dynamiquement le pied de page de restauration
KyleMit
4

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

ProblemsOfSumit
la source
2

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>
Paolo Bergantino
la source
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>
lahbib
la source
0

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';            
Gustavo Ruiz
la source