1. Разработать таблицу
Кода -копия выглядит следующим образом:
<тело>
<div>
<таблица идентификатора = "вкладка">
<tr style = "foureny: #000000; Color: #fffff; Font-Weight: Bolder;">
<Th> Рабочий номер </th>
<Th> имя </th>
<th> возраст </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> Лю 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 {
фоновый цвет: зеленый;
}
#tab {
Граница: 1PX #FF0000 твердый;
Текст-альбом: Центр;
Ширина: 100%;
высота: 100%;
}
3. Дизайн JS
Кода -копия выглядит следующим образом:
// установить нечетный цвет фона линии
$ ("#tab tr: add"). Найти ("td"). addclass ("tr_odd");
// установить ровный цвет фона линии
$ ("#tab Tr: даже"). Найти ("td"). addclass ("tr_even");
/**
* Цвет мыши переместился в
*/
$ ("#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. Приложение
Кода -копия выглядит следующим образом:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%>
<! Doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<голова>
<TILE> Таблица меняет цвет с помощью мыши </title>
<meta http-equiv = "pragma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "истекает" content = "0">
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "description" content = "Это моя страница">
<script type = "text/javascript" src = "../ scripts/jquery-1.11.0.js"> </script>
<стиль типа = "text/css">
.html_body .body_div {
Ширина: 1340;
Высота: 595;
}
.body_div {
размер шрифта: 12px;
фоновый цвет: #cccccc;
}
.tr_odd {
фоновый цвет: оранжевый;
}
.tr_even {
фоновый цвет: аква;
}
.mouse_color {
фоновый цвет: зеленый;
}
#tab {
Граница: 1PX #FF0000 твердый;
Текст-альбом: Центр;
Ширина: 100%;
высота: 100%;
}
</style>
<script type = "text/javascript">
$ (function () {
// установить нечетный цвет фона линии
$ ("#tab tr: add"). Найти ("td"). addclass ("tr_odd");
// установить ровный цвет фона линии
$ ("#tab Tr: даже"). Найти ("td"). addclass ("tr_even");
/**
* Цвет мыши переместился в
*/
$ ("#tab tr"). mouseover (function () {
$ (this) .find ("td"). addclass ("mouse_color");
});
/**
* Цвет удаления мыши
*/
$ ("#tab tr"). mouseout (function () {
$ (this) .find ("td"). removeClass ("mouse_color");
});
});
</script>
</head>
<тело>
<div>
<таблица идентификатора = "вкладка">
<tr style = "foureny: #000000; Color: #fffff; Font-Weight: Bolder;">
<Th> Рабочий номер </th>
<Th> имя </th>
<th> возраст </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> Лю 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>