1. Projete a tabela
A cópia do código é a seguinte:
<Body>
<div>
<tabela id = "tab">
<tr style = "Background: #000000; cor: #fffff; font-weight: Bolder;">
<th> Número de trabalho </th>
<th> nome </th>
<th> idade </th>
<th> gênero </th>
</tr>
<tr>
<Td> 2014010101 </td>
<td> zhang feng </td>
<Td> 56 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010102 </td>
<td> li yu </td>
<Td> 42 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010103 </td>
<td> wang ke </td>
<Td> 36 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010104 </td>
<td> zhang yu </td>
<Td> 31 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010105 </td>
<td> zhu gu </td>
<Td> 44 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010106 </td>
<td> hu yu </td>
<Td> 35 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010107 </td>
<td> Liu xi </td>
<Td> 30 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010108 </td>
<Td> Sun yu </td>
<Td> 45 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010109 </td>
<td> chuva verde </td>
<Td> 33 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010110 </td>
<td> keyu </td>
<Td> 45 </td>
<Td> feminino </td>
</tr>
</tabela>
</div>
</body>
2. Estilo de design
A cópia do código é a seguinte:
.html_body .body_div {
largura: 1340;
Altura: 595;
}
.body_div {
tamanho de fonte: 12px;
Background-Color: #CCCCCC;
}
.tr_odd {
cor de fundo: laranja;
}
.tr_even {
Background-Color: Aqua;
}
.mouse_color {
Background-Color: verde;
}
#tab {
Fronteira: 1PX #FF0000 SOLID;
Alinhamento de texto: centro;
largura: 100%;
Altura: 100%;
}
3. Design JS
A cópia do código é a seguinte:
// Defina a cor de fundo da linha ímpar
$ ("#tab tr: ímpar"). encontre ("td"). addclass ("tr_odd");
// Defina a cor de fundo da linha até
$ ("#tab tr: par"). encontre ("td"). addclass ("tr_even");
/**
* A cor do mouse moveu -se para
*/
$ ("#tab tr"). mouseOver (function () {
$ (this) .find ("td"). addclass ("mouse_color");
});
/**
* Cor de remoção do mouse
*/
$ ("#tab tr"). mouseout (function () {
$ (this) .find ("td"). removeclass ("mouse_color");
});
4. Resultados do projeto
(1) Inicialização
(2) Clique na linha ímpar
(3) Clique em até linhas
5. Apêndice
A cópia do código é a seguinte:
<%@ Page Language = "java" import = "java.util.*" PageEncoding = "utf-8"%>
<!
<html>
<head>
<title> A tabela muda de cor com o mouse </title>
<meta http-equiv = "Pragma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "expira" content = "0">
<meta http-equiv = "palavras-chave" content = "palavra-chave1, palavra-chave2, palavra-chave3">
<meta http-equiv = "description" content = "Esta é a minha página">
<script type = "text/javascript" src = "../ scripts/jQuery-1.11.0.js"> </script>
<style type = "text/css">
.html_body .body_div {
largura: 1340;
Altura: 595;
}
.body_div {
tamanho de fonte: 12px;
Background-Color: #CCCCCC;
}
.tr_odd {
cor de fundo: laranja;
}
.tr_even {
Background-Color: Aqua;
}
.mouse_color {
Background-Color: verde;
}
#tab {
Fronteira: 1PX #FF0000 SOLID;
Alinhamento de texto: centro;
largura: 100%;
Altura: 100%;
}
</style>
<script type = "text/javascript">
$ (function () {
// Defina a cor de fundo da linha ímpar
$ ("#tab tr: ímpar"). encontre ("td"). addclass ("tr_odd");
// Defina a cor de fundo da linha até
$ ("#tab tr: par"). encontre ("td"). addclass ("tr_even");
/**
* A cor do mouse moveu -se para
*/
$ ("#tab tr"). mouseOver (function () {
$ (this) .find ("td"). addclass ("mouse_color");
});
/**
* Cor de remoção do mouse
*/
$ ("#tab tr"). mouseout (function () {
$ (this) .find ("td"). removeclass ("mouse_color");
});
});
</script>
</head>
<Body>
<div>
<tabela id = "tab">
<tr style = "Background: #000000; cor: #fffff; font-weight: Bolder;">
<th> Número de trabalho </th>
<th> nome </th>
<th> idade </th>
<th> gênero </th>
</tr>
<tr>
<Td> 2014010101 </td>
<td> zhang feng </td>
<Td> 56 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010102 </td>
<td> li yu </td>
<Td> 42 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010103 </td>
<td> wang ke </td>
<Td> 36 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010104 </td>
<td> zhang yu </td>
<Td> 31 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010105 </td>
<td> zhu gu </td>
<Td> 44 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010106 </td>
<td> hu yu </td>
<Td> 35 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010107 </td>
<td> Liu xi </td>
<Td> 30 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010108 </td>
<Td> Sun yu </td>
<Td> 45 </td>
<Td> feminino </td>
</tr>
<tr>
<Td> 2014010109 </td>
<td> chuva verde </td>
<Td> 33 </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2014010110 </td>
<td> keyu </td>
<Td> 45 </td>
<Td> feminino </td>
</tr>
</tabela>
</div>
</body>
</html>