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

Réalisation d'une colorisation alternative des lignes de tableau avec CSS

Dans les tableaux HTML, l'attribution de couleurs alternées aux lignes peut améliorer l'attrait visuel, rendant les données plus lisibles. Ceci peut être réalisé soit en utilisant des classes CSS appliquées à des éléments tr individuels, soit en stylisant l'élément de table lui-même.

Utilisation des classes CSS

Le HTML et le CSS fournis utilisent des classes CSS (tr.d0 et tr .d1) pour colorer les lignes. Cependant, pour colorer les lignes en fonction de leur position dans le tableau, nous pouvons exploiter le sélecteur :nth-child dans l'élément tbody. Par exemple :

tbody tr:nth-child(2n+1) {
  background-color: #CC9999;
  color: black;
}
tbody tr:nth-child(2n) {
  background-color: #9999CC;
  color: black;
}

Utiliser le style de tableau

Alternativement, nous pouvons styliser l'ensemble du tableau en utilisant l'élément table. Pour donner à toutes les lignes impaires une couleur spécifique, nous pouvons utiliser le CSS suivant :

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

Utilisation de JavaScript (jQuery)

Une autre approche consiste à utiliser JavaScript (jQuery) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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!