1. 테이블을 디자인하십시오
코드 사본은 다음과 같습니다.
<body>
<div>
<테이블 id = "탭">
<tr style = "배경 : #000000; 색상 : #fffff; font-weight : BOOLDER;">
<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>
</테이블>
</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 : 짝수"). 찾기 ( "td"). addClass ( "tr_even");
/**
* 마우스의 색상이 움직였습니다
*/
$ ( "#tab tr"). 마우스 오버 (function () {
$ (this) .find ( "td"). addClass ( "mouse_color");
});
/**
* 마우스 제거 색상
*/
$ ( "#tab tr"). 마우스 아웃 (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>
<헤드>
<title> 테이블은 마우스 </title>으로 색상이 변경됩니다
<meta http-equiv = "pragma"content = "no-cache">
<meta http-equiv = "캐시 제어"content = "no-cache">
<meta http-equiv = "만료"내용 = "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>
<스타일 유형 = "텍스트/CSS">
.html_body .body_div {
너비 : 1340;
높이 : 595;
}
.body_div {
글꼴 크기 : 12px;
배경색 : #CCCCCC;
}
.tr_odd {
배경색 : 오렌지;
}
.tr_even {
배경색 : 아쿠아;
}
.mouse_color {
배경색 : 녹색;
}
#꼬리표{
테두리 : 1px #FF0000 솔리드;
텍스트 정렬 : 센터;
너비 : 100%;
높이 : 100%;
}
</스타일>
<script type = "text/javaScript">
$ (function () {
// 홀수 라인 배경색을 설정합니다
$ ( "#tab tr : Odd"). find ( "td"). addClass ( "tr_odd");
// 라인 배경색을 설정합니다
$ ( "#tab tr : 짝수"). 찾기 ( "td"). addClass ( "tr_even");
/**
* 마우스의 색상이 움직였습니다
*/
$ ( "#tab tr"). 마우스 오버 (function () {
$ (this) .find ( "td"). addClass ( "mouse_color");
});
/**
* 마우스 제거 색상
*/
$ ( "#tab tr"). 마우스 아웃 (function () {
$ (this) .find ( "td"). RemoveClass ( "mouse_color");
});
});
</스크립트>
</head>
<body>
<div>
<테이블 id = "탭">
<tr style = "배경 : #000000; 색상 : #fffff; font-weight : BOOLDER;">
<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>
</테이블>
</div>
</body>
</html>