jquery change la couleur sombre

Dans la conception Web, les tableaux sont une méthode de mise en page courante. Cependant, s'il y a trop de lignes dans le tableau, il peut être difficile pour les utilisateurs de faire la distinction entre les différentes lignes, ce qui affecte l'expérience utilisateur et la convivialité. Pour résoudre ce problème, les développeurs peuvent ajouter des effets visuels pour distinguer les différentes lignes. Dans cet article, nous utiliserons jQuery pour modifier la couleur des lignes dans un tableau afin d'améliorer l'expérience utilisateur.

La première étape consiste à configurer le tableau en HTML. Nous allons illustrer ce processus à l'aide d'un simple tableau à trois colonnes :

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Vient ensuite la partie CSS. Nous allons définir le style du tableau et la couleur des lignes :

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr.even {
  background-color: #f2f2f2;
}

Ici, nous définissons le style de base du tableau, y compris le remplissage et les bordures des cellules. Nous définissons également le style de ligne qui change de couleur une ligne sur deux en gris.

Nous allons maintenant utiliser jQuery pour ajouter des styles à chaque ligne du tableau. Nous utiliserons une variable pour suivre la parité de la ligne actuelle, puis ajouterons le nom de classe « pair » pour les lignes paires.

$(document).ready(function() {
  $('table tbody tr:even').addClass('even');
});

Cette fonction détecte d'abord si le document a été chargé et est prêt à fonctionner. Il utilise ensuite un sélecteur jQuery pour sélectionner la sous-balise tr de chaque balise tbody dans le tableau, filtre les lignes paires et ajoute le nom de classe « pair » à chaque ligne paire. Après cela, les lignes paires du tableau changeront la couleur d’arrière-plan pour les rendre plus lisibles.

A travers cet exemple, nous pouvons voir comment utiliser jQuery et CSS pour changer le style du tableau. Cela augmente non seulement l’impact visuel de la conception Web, mais améliore également l’expérience utilisateur et rend le site Web plus facile à utiliser.

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!