Comment masquer des colonnes de tableau dans jQuery?

Question

J'ai une table avec beaucoup de colonnes. Je souhaite donner aux utilisateurs la possibilité de sélectionner les colonnes à afficher dans le tableau. Ces options seraient des cases à cocher avec les noms de colonnes. Alors, comment puis-je masquer/afficher les colonnes de la table en fonction des cases à cocher?

Est-ce que cacher (en utilisant .hide()) chaque td dans chaque rangée fonctionne? Peut être je peux assigner la valeur de case à cocher à l'emplacement de la colonne dans la table. Donc, la première case à cocher signifie la première colonne et ainsi de suite. Et cachez ensuite récursivement ce td «numéroté» dans chaque rangée. Cela fonctionnerait-il?

Answer 1

Essayez:

function hideColumn(columnIndex) { 
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide(); 
} 

Ceci est une version assez basique - il suppose que votre table ne pas utiliser des éléments <TH> ou ont une durée de colonne variable, mais le concept de base est là. Notez que nth-child uses 1-based indexing. J'ai ajouté 1 à la dernière étape pour compenser cela.

Answer 2

J'ai construit un script qui fait ce que Rex suggère. Il y a une case à cocher (ou un élément) dans chaque colonne qui, lorsqu'elle est cliquée, détermine dans quelle colonne elle est basée sur le nième-enfant et puis cache les mêmes dans l'autre TR.

Avant .hide() J'ajouterais une classe que je pourrais référencer pour retourner la colonne. Le problème que j'ai eu, c'est que je travaillais avec des tables très stylées où certaines lignes avaient des colsettes et certaines TD avaient des classes uniques en fonction de leur position dans la rangée. Je décrirais des problèmes dans IE où IE ne montrerait pas toujours() les TDs cachés avec le style approprié. Il semblait que IE avait du mal à redessiner les TD.