jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > CSS > L’effet pyjama

L’effet pyjama

mercredi 7 février 2007, par piif

Comment modifier l’apparence d’une ligne sur deux dans un tableau


Pour rendre un tableau plus lisible, il est pratique de mettre un fond de couleur différent pour les lignes paires et les lignes impaires.

Mais c’est parfois pénible de générer un html contenant des class="pair" ou impair selon le rang de la ligne.

En jquery, c’est immédiat :
$('table.tableau//tr:even').addClass('pair'); et hop, les lignes paires des tableaux de classe tableau se retrouvent avec la classe pair.

Facile non ?

Il y a pourtant un effet de bord assez moche, s’il y a plusieurs tableaux dans la page. En effet, si le premier tableau contient par exemple 3 lignes, jquery les numérote 0, 1 et 2, la première est donc paire. Dans le second tableau, l’expression considère la première ligne du tableau comme étant la quatrième qui répond à l’expression, donc numéro 3, donc impair. Bref, le premier tableau commence par une ligne de classe pair et le second tableau, par une ligne sans classe ... et c’est moche.

Il faut donc travailler en deux temps : trouver les tableaux, et pour chacun, trouver les lignes paires. Le résultat est un poil plus compliqué :

$('.tableau').each(function() {
        $('tr:even', this).addClass('pair');
});

Mais finalement, ça se lit exactement comme la phrase précédente !

Une autre façon de faire consiste à ne pas compter les tr en vrac, mais a demander explicitement les "fils" des tableaux, via le prédicat nth-child qui peut prendre en argument un nombre mais aussi "even".

On obtient alors
$('table.tableau tr:nth-child(even)').addClass('pair');

Comme c’est vraiment trop simple, pour finir, on va chercher la petite bête, en disant qu’on ne veut pas repeindre les lignes d’entête du tableau, c’est à dire celles qui contiennent des th. La solution est immédiate : « les tr qui contiennent un td », se dit tr[td], donc on obtient :

$('.tableau').each(function() {
        $('tr[td]:even', this).addClass('pair');
});

C’est vexant de simplicité en fait :-)

On peut aussi reprendre le principe de la solution "sans each()", à condition d’avoir un tableau "propre", c’est à dire avec des blocs thead et tbody, la solution étant alors tout simplement
$('.tableau tbody tr:nth-child(even)').addClass('pair');

P.-S.

Pour les anglophones, un tutoriel très détaillé existe sur le wiki de jQuery Zèbrures rendues faciles

Documents joints

Répondre à cet article

6 Messages de forum

  • (logo)

    L’effet pyjama

    8 février 2007 09:55, par Nicolas Hoizey

    Dommage qu’il soit nécessaire de mettre une classe sur le tableau, mais sinon l’exemple est une belle démonstration de la puissance de jQuery !

    Répondre à ce message

    • (logo)
      une classe ? 8 février 2007 13:45

      Rien n’empèche d’écrire $("table") mais s’il y a des tableaux qui n’ont rien à voir dans la page, ça peut mettre la zone.

      Répondre à ce message

  • (logo)

    L’effet pyjama

    8 février 2007 17:40

    Comment utiliser le script ’tablesort.js’ (http://www.frequency-decoder.com/demo/table-sort-revisited/) et conserver l’ "effet pyjama") ? Je n’ai pas réussi. Merci.

    Répondre à ce message

    • (logo)
      L’effet pyjama 12 février 2007 11:09

      Tu detectes l’evennement click sur les th (je crois), tu enleves la classe pair sur toutes les lignes du tableau et re-applique la methode la class pair selon la methode decrite dans l’article ;)

      Répondre à ce message

  • L’effet pyjama

    13 février 2007 09:56, par toggg

    En discutant avec John au sujet du tutoriel qui venait d’être placé sur le wiki de jQuery que j’ai lié dans le PS. , je lui indiquais l’effet de plusieurs tableaux que tu signales. Il a donc apporté un complément à ce sujet en bas de page.

    Afin d’éviter le each(), il conseille de faire :

    $(’.tableau tr:nth-child(even)’).addClass(’pair’) ;

    Effectivement, cela fonctionne, sauf si comme toi, on saute les heading ... Dans ce cas , il faut faire :

    $(’.tableau tbody tr:nth-child(even)’).addClass(’pair’) ;

    ... en définissant corectement les thead et tbody et non plus en les déduisant des th inclus dans les tr , ce qui semble définitivement plus correct.

    Veux-tu que je charge ton exemple corrigé dans ce sens ?

    Voir en ligne : Zèbrures rendues faciles

    Répondre à ce message

  • (logo)

    L’effet pyjama

    14 mars 2007 15:26, par Shagshag

    Il ne faut quand même pas oublier que le javascript et jQuery doit être "non-obscursif". i.e. : une personne qui n’a pas javascript ou qui le désactive (comme moi de temps en temps) doit pouvoir voir le site sans problème. Donc tout ce qu’on peut faire en évitant javascript il faut le faire sans. Et ça en particulier. c’est 5 minutes passées de plus au développement et on a bonne conscience après.

    Voir en ligne : Directives pour l’accessibilité aux contenus Web

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web