Masquage de colonne avec classe
Lorsque l'on souhaite masquer une colonne d'une <table> la solution la plus couramment utilisée est de parcourir toutes les lignes de celle-ci et d'affecter une déclaration display:none à la cellule de la colonne concernée.
Il existe toutefois une méthode peut-être « plus élégante » qui consiste à ajouter/supprimer une classe CSS à la <table> et de laisser faire le moteur de rendu du navigateur.
La « barre de commande » ainsi que le CSS correspondant peuvent très bien être générés dynamiquement, comme dans l'exemple ci-dessous.
Exemple en action
| Prénom | Nom | Date | Entreprise | Fonction | Adresse | Adresse mail |
| Christoph | Casbourne | 09/13/1957 | Services | Tejon Ranch Co | 00281 Gina Terrace | ccasbourne0@oracle.com |
| Truda | Bertelmot | 11/11/1985 | Accounting | Clipper Realty Inc. | 32178 Parkside Center | tbertelmot1@domainmarket.com |
| Dallon | Goulding | 03/16/1977 | Research and Development | Goldman Sachs Group, Inc. (The) | 1 Prairieview Road | dgoulding2@umn.edu |
| Yoshiko | Danielsky | 07/10/1997 | Business Development | FB Financial Corporation | 47040 Spenser Road | ydanielsky3@tmall.com |
| Berte | Dmitrienko | 11/17/1995 | Marketing | Argan, Inc. | 44640 Hoffman Way | bdmitrienko4@nasa.gov |
| Valentijn | Meadmore | 08/02/1993 | Human Resources | MGM Resorts International | 6 Monica Center | vmeadmore5@ed.gov |
| Suzy | Flewett | 10/25/1980 | Research and Development | Ceragon Networks Ltd. | 894 Forest Dale Point | sflewett6@icio.us |
| Mordecai | Jerrams | 10/13/1965 | Training | Silicom Ltd | 2 Hallows Pass | mjerrams7@cnet.com |
| Claus | Samwyse | 11/25/1974 | Accounting | Verizon Communications Inc. | 38239 Gina Junction | csamwyse8@xing.com |
| Rafaelia | Pedrol | 04/18/1975 | Research and Development | Schneider National, Inc. | 97 Everett Plaza | rpedrol9@google.es |
| Lita | Lisimore | 06/08/1988 | Product Management | Simmons First National Corporation | 2081 Birchwood Street | llisimorea@wiley.com |
| Noak | McPeice | 12/06/1974 | Product Management | Eyegate Pharmaceuticals, Inc. | 7315 Susan Point | nmcpeiceb@discovery.com |
HTML généré et ajouté
CSS généré et ajouté
On utilise la pseudo-classe :nth-child(n) pour cibler la nième cellule, donc colonne, concernée.
Script de la page
Observations
On aurait également pu utiliser le même procédé appliqué à des éléments <col>, enfant d'un élément <colgroup>, en jouant cette fois avec la déclaration visibility:collapse, question de choix.
Il est bien sûr tout à fait possible de ne faire que l'affectation des événements en mettant le reste directement dans le code de la page mais c'est souvent des duplications pas forcément utiles.
L'usage des attributs de données, data-xxx, est une véritable bénédiction, on pourrait ainsi tout à fait prévoir d'exclure certaines colonnes en utilisant la présence/absence, par exemple, un attribut de donnée data-xxx particulier.