1. تصميم الجدول
نسخة الكود كما يلي:
<body>
<viv>
<table id = "tab">
<tr style = "الخلفية: #000000 ؛ اللون: #fffff ؛ font-weight: bolder ؛">
<th> رقم العمل </th>
<h> الاسم </th>
<th> العمر </th>
<th> الجنس </th>
</r>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010103 </td>
<td> Wang Ke </td>
<td> 36 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010104 </td>
<td> Zhang Yu </td>
<td> 31 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010105 </td>
<td> Zhu gu </td>
<td> 44 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010108 </td>
<td> Sun Yu </td>
<td> 45 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010109 </td>
<td> المطر الأخضر </td>
<td> 33 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> أنثى </td>
</r>
</table>
</div>
</body>
2. نمط التصميم
نسخة الكود كما يلي:
.html_body .body_div {
العرض: 1340 ؛
الارتفاع: 595 ؛
}
.body_div {
حجم الخط: 12 بكسل ؛
خلفية اللون: #CCCCCC ؛
}
.tr_odd {
خلفية اللون: البرتقالي.
}
.tr_even {
لون الخلفية: أكوا ؛
}
.mouse_color {
خلفية اللون: الأخضر.
}
#فاتورة غير مدفوعة{
الحدود: 1px #ff0000 الصلبة ؛
محاذاة النص: المركز ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
3. تصميم ي
نسخة الكود كما يلي:
// اضبط لون خلفية الخط الفردي
$ ("#tab tr: odd"). find ("td"). addClass ("tr_odd") ؛
// قم بتعيين لون خلفية الخط
$ ("#tab tr: حتى"). find ("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>
<head>
<title> يغير الجدول اللون مع الماوس </title>
<meta http-equiv = "pragma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "Expires" content = "0">
<meta http-equiv = "الكلمات الرئيسية" content = "Keyword1 ، Keyword2 ، Keyword3">
<meta http-equiv = "description" content = "This is is my past">
<script type = "text/javaScript" src = "../ scripts/jquery-1.11.0.js"> </script>
<type type = "text/css">
.html_body .body_div {
العرض: 1340 ؛
الارتفاع: 595 ؛
}
.body_div {
حجم الخط: 12 بكسل ؛
خلفية اللون: #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: حتى"). find ("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>
<body>
<viv>
<table id = "tab">
<tr style = "الخلفية: #000000 ؛ اللون: #fffff ؛ font-weight: bolder ؛">
<th> رقم العمل </th>
<h> الاسم </th>
<th> العمر </th>
<th> الجنس </th>
</r>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010103 </td>
<td> Wang Ke </td>
<td> 36 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010104 </td>
<td> Zhang Yu </td>
<td> 31 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010105 </td>
<td> Zhu gu </td>
<td> 44 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010108 </td>
<td> Sun Yu </td>
<td> 45 </td>
<td> أنثى </td>
</r>
<tr>
<td> 2014010109 </td>
<td> المطر الأخضر </td>
<td> 33 </td>
<td> ذكر </td>
</r>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> أنثى </td>
</r>
</table>
</div>
</body>
</html>