1. ออกแบบตาราง
การคัดลอกรหัสมีดังนี้:
<body>
<div>
<table id = "tab">
<tr style = "พื้นหลัง: #000000; สี: #FFFFF; font-weight: bolder;">
<th> หมายเลขงาน </th>
<th> ชื่อ </th>
<th> อายุ </th>
<th> เพศ </th>
</tr>
<tr>
<TD> 2014010101 </td>
<td> จางเฟิง </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 {
พื้นหลังสี: Aqua;
-
.mouse_color {
พื้นหลังสี: สีเขียว;
-
#tab {
ชายแดน: 1px #ff0000 ของแข็ง;
TEXT-ALIGN: CENTER;
ความกว้าง: 100%;
ความสูง: 100%;
-
3. การออกแบบ JS
การคัดลอกรหัสมีดังนี้:
// ตั้งค่าสีพื้นหลังบรรทัดแปลก ๆ
$ ("#TAB TR: คี่") ค้นหา ("td"). addClass ("tr_odd");
// ตั้งค่าสีพื้นหลังของเส้น
$ ("#tab tr: even") ค้นหา ("td"). addclass ("tr_even");
-
* สีของเมาส์ย้ายไป
-
$ ("#tab tr"). mouseover (function () {
$ (นี่) .find ("td"). addclass ("mouse_color");
-
-
* สีกำจัดเมาส์
-
$ ("#tab tr"). mouseout (function () {
$ (นี่) .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>
<head>
<title> ตารางเปลี่ยนสีด้วยเมาส์ </title>
<meta http-equiv = "pragma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "หมดอายุ" content = "0">
<meta http-equiv = "คำหลัก" content = "keyword1, keyword2, keyword3">
<meta http-equiv = "คำอธิบาย" 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 {
พื้นหลังสี: Aqua;
-
.mouse_color {
พื้นหลังสี: สีเขียว;
-
#tab {
ชายแดน: 1px #ff0000 ของแข็ง;
TEXT-ALIGN: CENTER;
ความกว้าง: 100%;
ความสูง: 100%;
-
</style>
<script type = "text/javascript">
$ (function () {
// ตั้งค่าสีพื้นหลังบรรทัดแปลก ๆ
$ ("#TAB TR: คี่") ค้นหา ("td"). addClass ("tr_odd");
// ตั้งค่าสีพื้นหลังของเส้น
$ ("#tab tr: even") ค้นหา ("td"). addclass ("tr_even");
-
* สีของเมาส์ย้ายไป
-
$ ("#tab tr"). mouseover (function () {
$ (นี่) .find ("td"). addclass ("mouse_color");
-
-
* สีกำจัดเมาส์
-
$ ("#tab tr"). mouseout (function () {
$ (นี่) .find ("td"). RemoveClass ("Mouse_Color");
-
-
</script>
</head>
<body>
<div>
<table id = "tab">
<tr style = "พื้นหลัง: #000000; สี: #FFFFF; font-weight: bolder;">
<th> หมายเลขงาน </th>
<th> ชื่อ </th>
<th> อายุ </th>
<th> เพศ </th>
</tr>
<tr>
<TD> 2014010101 </td>
<td> จางเฟิง </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>