1. Entwerfen Sie den Tisch
Die Codekopie lautet wie folgt:
<body>
<div>
<table id = "tab">
<tr style = "Hintergrund: #000000; Farbe: #fffff; Schriftgewicht: mutiger;">
<Th> Arbeitsnummer </th>
<Th> Name </th>
<Th> Alter </th>
<Th> Geschlecht </th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010104 </td>
<td> Zhang yu </td>
<td> 31 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010105 </td>
<td> Zhu Gu </td>
<td> 44 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010108 </td>
<td> sun yu </td>
<td> 45 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010109 </td>
<td> grüner Regen </td>
<td> 33 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> weiblich </td>
</tr>
</table>
</div>
</body>
2. Designstil
Die Codekopie lautet wie folgt:
.html_body .body_div {
Breite: 1340;
Höhe: 595;
}
.body_div {
Schriftgröße: 12px;
Hintergrundfarbe: #ccccc;
}
.tr_odd {
Hintergrundfarbe: Orange;
}
.tr_even {
Hintergrundfarbe: Aqua;
}
.mouse_color {
Hintergrundfarbe: Grün;
}
#Tab{
Grenze: 1px #ff0000 Solid;
Text-Align: Mitte;
Breite: 100%;
Höhe: 100%;
}
3. Design JS
Die Codekopie lautet wie folgt:
// Setzen Sie eine ungerade Linienhintergrundfarbe
$ ("#tab tr: Odd"). Find ("TD"). AddClass ("tr_odd");
// Setzen Sie eine gleichmäßige Linienhintergrundfarbe
$ ("#tab tr: sogar"). find ("td"). addClass ("tr_even");
/**
* Die Farbe der Maus bewegte sich auf
*/
$ ("#tab tr"). mouseover (function () {
$ (this) .find ("td"). addClass ("mouse_color");
});
/**
* Farbe der Mausentfernung
*/
$ ("#tab tr"). Mouseout (function () {
$ (this) .find ("td"). removeclass ("mouse_color");
});
4. Entwurfsergebnisse
(1) Initialisierung
(2) Klicken Sie auf die ungerade Zeile
(3) Klicken Sie auf sogar Zeilen
5. Anhang
Die Codekopie lautet wie folgt:
<%@ page Language = "java" import = "java.util.*" pageCoding = "utf-8"%>
<! DocType html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<kopf>
<title> Tabelle ändert die Farbe mit der Maus </title>
<meta http-äquiv = "pragma" content = "no-cache">
<meta http-äquiv = "cache-control" content = "no-cache">
<meta http-äquiv = "abläuft" content = "0">
<meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<meta http-äquiv = "Beschreibung" content = "Dies ist meine Seite">
<script type = "text/javaScript" src = "../ scripts/jQuery-1.11.0.js"> </script>
<style type = "text/css">
.html_body .body_div {
Breite: 1340;
Höhe: 595;
}
.body_div {
Schriftgröße: 12px;
Hintergrundfarbe: #ccccc;
}
.tr_odd {
Hintergrundfarbe: Orange;
}
.tr_even {
Hintergrundfarbe: Aqua;
}
.mouse_color {
Hintergrundfarbe: Grün;
}
#Tab{
Grenze: 1px #ff0000 Solid;
Text-Align: Mitte;
Breite: 100%;
Höhe: 100%;
}
</style>
<script type = "text/javaScript">
$ (function () {
// Setzen Sie eine ungerade Linienhintergrundfarbe
$ ("#tab tr: Odd"). Find ("TD"). AddClass ("tr_odd");
// Setzen Sie eine gleichmäßige Linienhintergrundfarbe
$ ("#tab tr: sogar"). find ("td"). addClass ("tr_even");
/**
* Die Farbe der Maus bewegte sich auf
*/
$ ("#tab tr"). mouseover (function () {
$ (this) .find ("td"). addClass ("mouse_color");
});
/**
* Farbe der Mausentfernung
*/
$ ("#tab tr"). Mouseout (function () {
$ (this) .find ("td"). removeclass ("mouse_color");
});
});
</script>
</head>
<body>
<div>
<table id = "tab">
<tr style = "Hintergrund: #000000; Farbe: #fffff; Schriftgewicht: mutiger;">
<Th> Arbeitsnummer </th>
<Th> Name </th>
<Th> Alter </th>
<Th> Geschlecht </th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010104 </td>
<td> Zhang yu </td>
<td> 31 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010105 </td>
<td> Zhu Gu </td>
<td> 44 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010108 </td>
<td> sun yu </td>
<td> 45 </td>
<td> weiblich </td>
</tr>
<tr>
<td> 2014010109 </td>
<td> grüner Regen </td>
<td> 33 </td>
<td> männlich </td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> weiblich </td>
</tr>
</table>
</div>
</body>
</html>