1.テーブルを設計します
コードコピーは次のとおりです。
<body>
<div>
<表ID = "Tab">
<tr style = "background：＃000000; color：#fffff; font-weight：bolder;">
<th>作業番号</th>
<th>名前</th>
<th> age </th>
<th>性別</th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010104 </td>
<td> Zhang Yu </td>
<td> 31 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010105 </td>
<td> Zhu gu </td>
<td> 44 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010108 </td>
<td> sun yu </td>
<td> 45 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010109 </td>
<td>緑の雨</td>
<td> 33 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td>女性</td>
</tr>
</table>
</div>
</body>
2。デザインスタイル
コードコピーは次のとおりです。
.html_body .body_div {
幅：1340;
高さ：595;
}
.body_div {
フォントサイズ：12px;
バックグラウンドカラー：#cccccc;
}
.tr_odd {
背景色：オレンジ;
}
.tr_even {
背景色：アクア;
}
.mouse_color {
背景色：緑;
}
＃タブ{
ボーダー：1px＃ff0000ソリッド;
テキストアライグ：センター;
幅：100％;
高さ：100％;
}
3.設計JS
コードコピーは次のとおりです。
//奇妙なラインの背景色を設定します
$（ "＃tab tr：odd"）。find（ "td"）。addclass（ "tr_odd"）;
//偶数行の背景色を設定します
$（ "＃tab tr：ven"）
/**
*マウスの色が移動しました
*/
$（ "＃tab tr"）。mouseover（function（）{
$（this）.find（ "td"）。addclass（ "mouse_color"）;
}）;
/**
*マウスの除去色
*/
$（ "＃tab tr"）。mouseout（function（）{
$（this）.find（ "td"）。removeclass（ "mouse_color"）;
}）;
4。デザインの結果
（1）初期化
（2）奇数行をクリックします
（3）均一な行をクリックします
5。付録
コードコピーは次のとおりです。
<％@ページ言語= "java" import = "java.util。*" pageencoding = "utf-8"％>
<！doctype html public " - // w3c // dtd html 4.01 transitional // en">
<html>
<head>
<title>テーブルはマウスで色を変更します</title>
<メタhttp-equiv = "pragma" content = "no-cache">
<Meta http-equiv = "cache-control" content = "no-cache">
<メタhttp-equiv = "expires" content = "0">
<meta http-equiv = "keywords" content = "keyword2、keyword3">
<メタhttp-equiv = "description" content = "これは私のページ">
<script type = "text/javascript" src = "../ scripts/jquery-1.11.0.js"> </script>
<style type = "text/css">
.html_body .body_div {
幅：1340;
高さ：595;
}
.body_div {
フォントサイズ：12px;
バックグラウンドカラー：#cccccc;
}
.tr_odd {
背景色：オレンジ;
}
.tr_even {
背景色：アクア;
}
.mouse_color {
背景色：緑;
}
＃タブ{
ボーダー：1px＃ff0000ソリッド;
テキストアライグ：センター;
幅：100％;
高さ：100％;
}
</style>
<script type = "text/javascript">
$（function（）{
//奇妙なラインの背景色を設定します
$（ "＃tab tr：odd"）。find（ "td"）。addclass（ "tr_odd"）;
//偶数行の背景色を設定します
$（ "＃tab tr：ven"）
/**
*マウスの色が移動しました
*/
$（ "＃tab tr"）。mouseover（function（）{
$（this）.find（ "td"）。addclass（ "mouse_color"）;
}）;
/**
*マウスの除去色
*/
$（ "＃tab tr"）。mouseout（function（）{
$（this）.find（ "td"）。removeclass（ "mouse_color"）;
}）;
}）;
</script>
</head>
<body>
<div>
<表ID = "Tab">
<tr style = "background：＃000000; color：#fffff; font-weight：bolder;">
<th>作業番号</th>
<th>名前</th>
<th> age </th>
<th>性別</th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010104 </td>
<td> Zhang Yu </td>
<td> 31 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010105 </td>
<td> Zhu gu </td>
<td> 44 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010108 </td>
<td> sun yu </td>
<td> 45 </td>
<td>女性</td>
</tr>
<tr>
<td> 2014010109 </td>
<td>緑の雨</td>
<td> 33 </td>
<td>男性</td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td>女性</td>
</tr>
</table>
</div>
</body>
</html>