Comment puis-je créer des couleurs de lignes alternées dans des tableaux HTML à l'aide de CSS et jQuery ?

Utiliser CSS pour créer des couleurs de lignes de tableau alternées

Pour alterner dynamiquement les couleurs d'arrière-plan des lignes de tableau avec CSS, vous pouvez manipuler les propriétés CSS d'éléments de table et de ligne.

Utilisation du nième enfant Sélecteur :

Vous pouvez utiliser le sélecteur CSS nième enfant pour cibler les lignes paires ou impaires. Par exemple :

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

Cette règle stylisera toutes les lignes impaires du corps du tableau avec un fond bleu et du texte blanc.

Utilisation de jQuery :

Vous pouvez également utiliser JavaScript pour identifier et styliser les lignes de manière dynamique. Avec jQuery :

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

Ce code sélectionne toutes les lignes impaires et définit leur couleur d'arrière-plan sur le noir et la couleur du texte sur le blanc.

Application de styles à l'élément de tableau :

Si vous souhaitez appliquer l'effet de couleur alternée à l'ensemble du tableau, vous pouvez utiliser ceci approche :

<table class="alternate_color">
  ...
</table>

.alternate_color tr:nth-child(odd) {
  background-color: #f5f5f5;
}

Dans ce cas, vous ajoutez une classe à la table et la règle CSS cible toutes les lignes impaires de cette table.

Remarque : Utilisation la classe de l'élément table pour alterner les couleurs des lignes peut interférer avec les règles de style existantes appliquées à la table, il est donc généralement préférable d'utiliser le sélecteur nième enfant directement sur l'élément tr.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!