1. Concevoir la table
La copie de code est la suivante:
<body>
<div>
<table id = "tab">
<tr style = "Background: # 000000; Couleur: #fffff; Font-Weight: Bolder;">
<th> numéro de travail </th>
<th> nom </th>
<th> Âge </th>
<th> genre </th>
</tr>
<tr>
<TD> 2014010101 </td>
<TD> Zhang Feng </td>
<td> 56 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010102 </td>
<Td> li yu </td>
<td> 42 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010104 </td>
<TD> Zhang Yu </td>
<td> 31 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010105 </td>
<TD> Zhu gu </td>
<td> 44 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010106 </td>
<TD> Hu Yu </td>
<td> 35 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010108 </td>
<TD> Sun Yu </td>
<td> 45 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010109 </td>
<TD> Green Rain </td>
<td> 33 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<TD> Femme </td>
</tr>
</ table>
</div>
</docy>
2. Style de conception
La copie de code est la suivante:
.html_body .body_div {
Largeur: 1340;
hauteur: 595;
}
.body_div {
taille de police: 12px;
Color d'arrière-plan: #CCCCCC;
}
.tr_odd {
Color en arrière-plan: orange;
}
.tr_even {
Color en arrière-plan: Aqua;
}
.Mouse_Color {
Color en arrière-plan: vert;
}
#languette{
Border: 1px # FF0000 Solid;
Texte-aligne: Centre;
Largeur: 100%;
hauteur: 100%;
}
3. Design js
La copie de code est la suivante:
// définir la couleur d'arrière-plan de ligne impair
$ ("# tab tr: Odd"). trouver ("td"). addClass ("tr_odd");
// Définir la couleur d'arrière-plan de la ligne
$ ("# tab tr: même"). trouver ("td"). addClass ("tr_even");
/ **
* La couleur de la souris s'est déplacée vers
* /
$ ("# tab tr"). MouseOver (function () {
$ (this) .find ("td"). addClass ("souris_color");
});
/ **
* Couleur d'élimination de la souris
* /
$ ("# tab tr"). Mouseout (function () {
$ (this) .find ("td"). RemoveClass ("souris_color");
});
4. Résultats de conception
(1) initialisation
(2) Cliquez sur la ligne étrange
(3) Cliquez sur des lignes uniformes
5. Annexe
La copie de code est la suivante:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%>
<! Doctype html public "- // w3c // dtd html 4.01 transitional // en">
<html>
<adal>
<Title> Le tableau modifie la couleur avec la souris </Title>
<méta http-equiv = "pragma" contenu = "non-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<méta http-equiv = "expires" content = "0">
<meta http-equiv = "keywords" contenu = "keyword1, keyword2, keyword3">
<méta http-equiv = "Description" content = "Ceci est ma page">
<script type = "text / javascript" src = "../ scripts / jquery-1.11.0.js"> </ script>
<style type = "text / css">
.html_body .body_div {
Largeur: 1340;
hauteur: 595;
}
.body_div {
taille de police: 12px;
Color d'arrière-plan: #CCCCCC;
}
.tr_odd {
Color en arrière-plan: orange;
}
.tr_even {
Color en arrière-plan: Aqua;
}
.Mouse_Color {
Color en arrière-plan: vert;
}
#languette{
Border: 1px # FF0000 Solid;
Texte-aligne: Centre;
Largeur: 100%;
hauteur: 100%;
}
</ style>
<script type = "text / javascript">
$ (function () {
// définir la couleur d'arrière-plan de ligne impair
$ ("# tab tr: Odd"). trouver ("td"). addClass ("tr_odd");
// Définir la couleur d'arrière-plan de la ligne
$ ("# tab tr: même"). trouver ("td"). addClass ("tr_even");
/ **
* La couleur de la souris s'est déplacée vers
* /
$ ("# tab tr"). MouseOver (function () {
$ (this) .find ("td"). addClass ("souris_color");
});
/ **
* Couleur d'élimination de la souris
* /
$ ("# tab tr"). Mouseout (function () {
$ (this) .find ("td"). RemoveClass ("souris_color");
});
});
</cript>
</ head>
<body>
<div>
<table id = "tab">
<tr style = "Background: # 000000; Couleur: #fffff; Font-Weight: Bolder;">
<th> numéro de travail </th>
<th> nom </th>
<th> Âge </th>
<th> genre </th>
</tr>
<tr>
<TD> 2014010101 </td>
<TD> Zhang Feng </td>
<td> 56 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010102 </td>
<Td> li yu </td>
<td> 42 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010104 </td>
<TD> Zhang Yu </td>
<td> 31 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010105 </td>
<TD> Zhu gu </td>
<td> 44 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010106 </td>
<TD> Hu Yu </td>
<td> 35 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010108 </td>
<TD> Sun Yu </td>
<td> 45 </td>
<TD> Femme </td>
</tr>
<tr>
<TD> 2014010109 </td>
<TD> Green Rain </td>
<td> 33 </td>
<td> mâle </td>
</tr>
<tr>
<TD> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<TD> Femme </td>
</tr>
</ table>
</div>
</docy>
</html>