Cacher/afficher une colonne dans un tableau HTML

Question

J'ai un tableau HTML avec plusieurs colonnes et j'ai besoin d'implémenter un sélecteur de colonnes en utilisant jquery. Lorsqu'un utilisateur clique sur une case à cocher, je veux masquer/afficher la colonne correspondante dans le tableau. Je voudrais faire cela sans attacher une classe à chaque td dans le tableau, y a-t-il un moyen de sélectionner une colonne entière en utilisant jquery ? Vous trouverez ci-dessous un exemple de 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>

Answer 1

Une ligne de code utilisant jQuery :

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

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

Source : Masquer une colonne de tableau 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 coup d'œil à mon article de blog :

Masquer une colonne de tableau et colorer les rangées en fonction de la valeur avec jQuery .

Answer 2

Je voudrais faire cela sans attacher une classe à chaque td

Personnellement, j'opterais pour l'approche de la classe sur chaque td/th/col. Vous pouvez alors activer et désactiver les colonnes en utilisant une seule écriture vers className sur le conteneur, en supposant que les règles de style soient les suivantes :

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

Cette méthode sera plus rapide que toute autre approche de boucle JS ; pour les tableaux vraiment longs, elle peut faire une différence significative en termes de réactivité.

Si vous pouvez vous passer de la prise en charge d'IE6, vous pouvez utiliser des sélecteurs d'adjacence pour éviter d'avoir à ajouter les attributs de classe aux tds. Ou bien, si votre souci est de rendre le balisage plus propre, vous pourriez les ajouter automatiquement à partir de JavaScript dans une étape d'initialisation.

Answer 3

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 juste le désir <col> classe.

Answer 4

Les éléments suivants devraient suffire :

$("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'indice choisi extrait du nom de la case à cocher. Vous pourriez bien sûr limiter les sélecteurs avec une classe ou un ID.

Answer 5

Et bien sûr, la méthode CSS n'existe que pour les navigateurs qui supportent nth-child :

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

Ceci est pour IE9 et mieux.

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

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

ect...