Maison > Article > interface Web > Exemple de code pour utiliser jQuery pour modifier les couleurs des lignes du tableau
Exemple de code pour utiliser jQuery pour modifier les couleurs des lignes du tableau
- 小云云original
- 2017-12-29 13:46:411597parcourir
Cet article vous présente un exemple simple d'utilisation de JQ pour changer la couleur des lignes alternées d'un tableau. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
1. Analyse des étapes :
La première étape : introduire la bibliothèque de classes jquery
La deuxième étape : écrire directement la fonction de chargement de page
La troisième étape : Utilisez directement le sélecteur de jquery (sélection de combinaison) pour obtenir les éléments qui doivent être exploités (lignes impaires et lignes paires)
Étape 4 : Utilisez la méthode CSS (css(name, value)) pour les impairs les lignes respectivement et les lignes paires définissent la couleur d'arrière-plan.
2. Implémentation de code spécifique :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1.页面加载
$(function(){
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").css("background-color","gold");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").css("background-color","pink");
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
3. Pendant le développement réel, le style CSS général a été écrit par l'artiste. À ce stade, vous pouvez utiliser l'opération de classe CSS de jquery <.>
Le code spécifique est le suivant :<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" href="../css/style.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1.页面加载
$(function(){
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").addClass("even");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("odd");
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>Exécutez-le dans Google Chrome pour obtenir l'effet de changer la couleur du tableau toutes les deux lignes. Recommandations associées : Comment utiliser le % de JavaScript pour effectuer un changement de couleur entrelacé
Tutoriel de changement de couleur entrelacé CSS
Comment utiliser jstl pour changer la couleur des tableaux dans des lignes alterné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!