masquer automatiquement les colonnes d’un tableau en cochant une case avec jQuery jQuery Girl

Je souhaite afficher 3 cases à cocher pré-cochées, mais dès que l’utilisateur désélectionne une case, la colonne correspondante disparaît.

 First Name
  Last Name
  Email
Comment obtenir l’URL chargée de la page actuelle depuis iframe
En cliquant sur ancre devrait exécuter javascript pas aller à une nouvelle page
Blocage d’un cadre d’origine «http: // localhost: 8084» pour accéder à un cadre d’origine croisée
Comment puis-je suivre un événement à l’aide de Firebug?
Superposition d’images JQuery avec la souris

Rendu HTML de la table

    First Name  Last Name  Email  
 
   Larry  Hughes  [email protected]  
  Mike  Tyson  [email protected]

First Name	Last Name	Email
Larry	Hughes	[email protected]
Mike	Tyson	[email protected]

J’imagine qu’il s’agira d’un événement de clic en direct, définissant chaque classe sur .hide ()

Toute aide est appréciée

Pour que les colonnes soient automatiquement masquées pour les cases à cocher masquées par défaut (chargement de la page), utilisez le code suivant avec l’élément click pour basculer les colonnes:

 $("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(); });

Démo: http://jsfiddle.net/highwayoflife/8BahZ/4/

Cet exemple utilise également un sélecteur du type: $ (‘table. Nom_classe’); ce qui constituera un sélecteur plus rapide si vous utilisez le code sur une page plus grande, car il n’aura pas à chercher dans tous les éléments du DOM pour trouver les noms de classe, mais uniquement dans les tables.

 $("input:checkbox").click(function(){ var column = "."+$(this).attr("name"); $(column).toggle(); });

METTRE À JOUR

Découvrez la démo en ligne ici: http://jsfiddle.net/8BahZ/