Comment créer des rayures zébrées dans des tableaux HTML à l'aide de CSS et JavaScript ?

Comment appliquer des couleurs de lignes de tableau alternatives à l'aide de CSS et JavaScript

Dans votre code HTML, vous pouvez utiliser des classes pour appliquer des couleurs de lignes alternatives, comme vous avez démontré. Cependant, vous souhaitez appliquer le style au conteneur de table lui-même et non à chaque ligne individuelle. Les sélecteurs CSS fournissent un moyen d'y parvenir.

Pour que les lignes du tableau aient des rayures zébrées, vous pouvez utiliser la pseudo-classe :nth-child(odd). Ce sélecteur cible chaque ligne impaire du corps du tableau (). Vous pouvez ensuite appliquer un style à ces lignes impaires, comme une couleur d'arrière-plan et une couleur de texte différentes.

Utilisation de jQuery

Si vous préférez utiliser JavaScript, vous pouvez utiliser la bibliothèque jQuery. Avec jQuery, vous pouvez sélectionner toutes les lignes impaires du tableau et appliquer le style souhaité avec la fonction css().

Exemple HTML :

<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

CSS :

tbody td {
  padding: 30px;
}

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

jQuery :

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

Avec ceux-ci méthodes, vous pouvez facilement créer des couleurs de lignes de tableau alternatives à l'aide de CSS, garantissant ainsi une présentation visuellement attrayante de vos données.

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!