Quel est le meilleur moyen de styler des lignes en alternance dans une table?

Question

Évidemment, le style réel des lignes paires / impaires se fera via une classe CSS, mais quel est le meilleur moyen de " attacher " la classe aux rangées? Est-il préférable de le mettre dans le balisage, ou vaut-il mieux le faire via javascript côté client? Quel est le meilleur et pourquoi?

Par souci de simplicité, supposons qu'il s'agit d'un grand tableau de 100 lignes et que le jeu de couleurs est constitué de lignes paires / impaires en alternance. De plus, une sorte de bibliothèque javascript pouvant facilement faire cela est nécessaire ailleurs dans la page et les frais généraux de ce paquet ne sont donc pas un facteur.

Le véritable objectif de cette question est de déterminer quels compromis sont impliqués ainsi que la façon dont ces compromis doivent être traités, tels que les performances du serveur si la page est consultée sous chargement (supposons un tableau dynamique) , accès à la bande passante pour les utilisateurs avec des vitesses de connexion inférieures, accès sémantiques en ajoutant un code de présentation supplémentaire au code HTML (L'idée ici est que HTML est destiné au contenu, CSS à la présentation, et javascript à la façon dont le contenu se comporte ainsi qu'au contrôle / augmentation la mise en page)

Answer 1

Vous pouvez le faire assez facilement avec jQuery, comme suit:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

Vous pouvez qualifier un peu plus le sélecteur si vous souhaitez simplement le faire sur une table en particulier, ou le faire également sur des éléments 'li'.

Je pense que c'est un peu plus propre et lisible côté client que dans certains environnements côté serveur,

Answer 2

Je le mettrais dans le balisage (côté serveur). rowNum = (rowNum - 1) * -1 est une bête noire du site web lorsqu'un site Web est lent, car le nombre de scripts JavaScript exécutés est trop lent.

Answer 3

Comme indiqué dans les autres réponses, le faire sur une grande table côté client sera plus lent que sur le côté serveur, et risque de ne pas fonctionner si l'utilisateur a javascript désactivé.

Cependant, l’utilisation d’un framework JS tel que jQuery simplifie les choses et les rend tentantes:

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 4

Pour une table de cette taille, je ferais le traitement des lignes côté serveur, en utilisant PHP ou similaire, afin de calculer les noms de classes impairs / pairs pour chaque ligne. Cette solution fonctionnera pour ceux avec JavaScript désactivé et sera beaucoup plus performante que n'importe quelle bibliothèque JavaScript traitant un élément de table de cette taille.

En PHP, la logique ressemblerait à quelque chose comme

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

Si vous ne pouvez effectuer aucun traitement côté serveur, nous vous recommandons de définir les balises de classe pour chaque ligne dans JavaScript, plutôt que de manipuler directement les styles. De cette façon, la présentation est laissée au CSS et le comportement au JavaScript. Si vous modifiez la manière dont les classes sont générées à une date ultérieure, le code de la présentation restera le même.

Answer 5

Je le ferais d’abord sur le côté serveur car javascript n’est peut-être pas activé sur le client. Si vous ajoutez / supprimez des lignes côté client avec javascript, vous pouvez également avoir la possibilité de le faire sur le client une fois l'événement Add / Remove terminé. Dans la mesure du possible, vous devriez essayer de faire en sorte que votre interface se comporte bien sans Javascript, sauf si vous pouvez contrôler l'environnement du navigateur (par exemple, dans une application intranet où vous pouvez exiger qu'elle soit activée).

Answer 6

Un jour, nous pourrons simplement utiliser le CSS pur . Bien entendu, cette partie de la spécification CSS a été introduite en 2001 et n'est toujours pas prise en charge. = (

Answer 7

Ce que vous essayez d'accomplir peut même être fait avec CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

C’est également répertorié dans la spécification de sélecteurs css3 du w3 . Si vous recherchez une compatibilité, ajouter la classe côté serveur ou via javascript serait une bien meilleure solution.

Answer 8

Cela dépend de votre scénario. JavaScript peut être plus rapide à implémenter pour un certain nombre de lignes si la table n'est pas créée à la volée. Toutefois, si vous créez votre table de manière dynamique, vous pouvez assez facilement définir la classe pour que chaque ligne soit "" row_alternate". - Je préfère la méthode côté serveur si vous craignez que certains de vos utilisateurs n'aient pas JavaScript.

Answer 9

Si vous utilisez un type de framework, il s'agit généralement de l'une des premières fonctionnalités incluses.

Sinon, j'ai cherché sur Google pour "jscript tableau alternant les couleurs". et a plusieurs dizaines de liens vers des techniques.

(C’est dommage que les développeurs n’obtiennent jamais de crédit pour le code qu’ils n’ont pas écrit.)

Answer 10

J'applique toujours la classe côté serveur au fur et à mesure de leur flux / ajout à la page, mais si vous avez un re-tri côté client, les lignes devront être reclassées.

Answer 11

J'ai trouvé un bon site expliquant ce que vous voulez réaliser avec jquery:

Voici le résultat final- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

Et voici le tutoriel- http://15daysofjquery.com/examples/zebra/

Answer 12

Je dirais vraiment que cela dépend de la situation. Si vous parcourez les données pour créer les lignes côté serveur, je dirais probablement que vous devriez le faire ici.

Cela devient beaucoup plus compliqué si vous commencez à utiliser un script côté client pour trier / réorganiser les lignes. Dans ce cas, s'il s'agit d'une centaine de lignes, je pourrais être enclin à le faire côté client, car au moins, vous ne dupliquez pas le code pour déterminer la couleur de la ligne. J'admets que cela dépend vraiment de la vitesse dans ce cas. Je vais probablement essayer de voir si la performance est acceptable avant de prendre une décision finale.