1. Diseñe la mesa
La copia del código es la siguiente:
<Body>
<div>
<table id = "tab">
<tr style = "fondo: #000000; color: #fffff; font-weight: audaz;">
<th> Número de trabajo </th>
<th> nombre </th>
<th> edad </th>
<th> género </th>
</tr>
<tr>
<TD> 2014010101 </td>
<TD> Zhang Feng </td>
<TD> 56 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010102 </td>
<TD> li yu </td>
<TD> 42 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010103 </td>
<TD> Wang Ke </td>
<TD> 36 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010104 </td>
<Td> Zhang Yu </td>
<TD> 31 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010105 </td>
<TD> zhu gu </td>
<TD> 44 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010106 </td>
<TD> hu yu </td>
<TD> 35 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010107 </td>
<TD> liu xi </td>
<TD> 30 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010108 </td>
<Td> Sun Yu </td>
<TD> 45 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010109 </td>
<TD> Rain Green </td>
<TD> 33 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010110 </td>
<TD> KEYU </td>
<TD> 45 </td>
<td> femenina </td>
</tr>
</table>
</div>
</body>
2. Estilo de diseño
La copia del código es la siguiente:
.html_body .body_div {
Ancho: 1340;
Altura: 595;
}
.Body_Div {
tamaño de fuente: 12px;
Color de fondo: #CCCCCC;
}
.tr_odd {
Color de fondo: naranja;
}
.Tr_Even {
Color de fondo: Aqua;
}
.Mouse_Color {
Color de fondo: verde;
}
#pestaña{
borde: 1px #ff0000 sólido;
Text-Align: Center;
Ancho: 100%;
Altura: 100%;
}
3. Diseño JS
La copia del código es la siguiente:
// establecer color de fondo de línea impar
$ ("#tab tr: impar"). Find ("td"). addClass ("tr_odd");
// establecer un color de fondo de línea uniforme
$ ("#tab tr: incluso"). Find ("TD"). AddClass ("Tr_Even");
/**
* El color del mouse se movió a
*/
$ ("#tab tr"). Mouseover (function () {
$ (this) .find ("td"). addClass ("mouse_color");
});
/**
* Color de eliminación del mouse
*/
$ ("#tab tr"). Mouseout (function () {
$ (this) .find ("td"). removeClass ("mouse_color");
});
4. Resultados de diseño
(1) Inicialización
(2) Haga clic en la fila impar
(3) Haga clic en incluso filas
5. Apéndice
La copia del código es la siguiente:
<%@ page idioma = "java" import = "java.util.*" PageEncoding = "UTF-8"%>
<! Doctype html público "-// w3c // dtd html 4.01 transitional // en">
<html>
<Evista>
<title> La tabla cambia de color con el mouse </title>
<meta http-equiv = "pragma" content = "no-cache">
<meta http-oquiv = "cache-control" content = "no-cache">
<meta http-oquiv = "expires" content = "0">
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-oquiv = "descripción" content = "esta es mi página">
<script type = "text/javaScript" src = "../ scripts/jQuery-1.11.0.js"> </script>
<style type = "text/css">
.html_body .body_div {
Ancho: 1340;
Altura: 595;
}
.Body_Div {
tamaño de fuente: 12px;
Color de fondo: #CCCCCC;
}
.tr_odd {
Color de fondo: naranja;
}
.Tr_Even {
Color de fondo: Aqua;
}
.Mouse_Color {
Color de fondo: verde;
}
#pestaña{
borde: 1px #ff0000 sólido;
Text-Align: Center;
Ancho: 100%;
Altura: 100%;
}
</style>
<script type = "text/javaScript">
$ (function () {
// establecer color de fondo de línea impar
$ ("#tab tr: impar"). Find ("td"). addClass ("tr_odd");
// establecer un color de fondo de línea uniforme
$ ("#tab tr: incluso"). Find ("TD"). AddClass ("Tr_Even");
/**
* El color del mouse se movió a
*/
$ ("#tab tr"). Mouseover (function () {
$ (this) .find ("td"). addClass ("mouse_color");
});
/**
* Color de eliminación del mouse
*/
$ ("#tab tr"). Mouseout (function () {
$ (this) .find ("td"). removeClass ("mouse_color");
});
});
</script>
</ablo>
<Body>
<div>
<table id = "tab">
<tr style = "fondo: #000000; color: #fffff; font-weight: audaz;">
<th> Número de trabajo </th>
<th> nombre </th>
<th> edad </th>
<th> género </th>
</tr>
<tr>
<TD> 2014010101 </td>
<TD> Zhang Feng </td>
<TD> 56 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010102 </td>
<TD> li yu </td>
<TD> 42 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010103 </td>
<TD> Wang Ke </td>
<TD> 36 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010104 </td>
<Td> Zhang Yu </td>
<TD> 31 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010105 </td>
<TD> zhu gu </td>
<TD> 44 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010106 </td>
<TD> hu yu </td>
<TD> 35 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010107 </td>
<TD> liu xi </td>
<TD> 30 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010108 </td>
<Td> Sun Yu </td>
<TD> 45 </td>
<td> femenina </td>
</tr>
<tr>
<TD> 2014010109 </td>
<TD> Rain Green </td>
<TD> 33 </td>
<td> macho </td>
</tr>
<tr>
<TD> 2014010110 </td>
<TD> KEYU </td>
<TD> 45 </td>
<td> femenina </td>
</tr>
</table>
</div>
</body>
</html>