1. Desain meja
Salinan kode adalah sebagai berikut:
<body>
<div>
<tabel id = "tab">
<tr style = "latar belakang: #000000; warna: #fffff; font-weight: bolder;">
<TH> Nomor Kerja </th>
<th> nama </t>
<th> usia </t>
<th> gender </th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010104 </td>
<td> zhang yu </td>
<td> 31 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010105 </td>
<td> zhu gu </td>
<td> 44 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010108 </td>
<td> Sun yu </td>
<td> 45 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010109 </td>
<td> hujan hijau </td>
<td> 33 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> wanita </td>
</tr>
</boable>
</div>
</body>
2. Gaya desain
Salinan kode adalah sebagai berikut:
.html_body .body_div {
Lebar: 1340;
Tinggi: 595;
}
.body_div {
font-size: 12px;
Latar Belakang-Color: #CCCCCC;
}
.tr_odd {
latar belakang-warna: oranye;
}
.tr_even {
Latar Belakang-Color: Aqua;
}
.mouse_color {
Latar Belakang: Hijau;
}
#tab {
Perbatasan: 1px #ff0000 solid;
Teks-Align: tengah;
Lebar: 100%;
Tinggi: 100%;
}
3. Desain JS
Salinan kode adalah sebagai berikut:
// atur warna latar belakang garis aneh
$ ("#tab tr: ganjil"). find ("td"). addClass ("tr_odd");
// atur bahkan warna latar belakang garis
$ ("#tab tr: even"). find ("td"). addclass ("tr_even");
/**
* Warna mouse pindah ke
*/
$ ("#tab tr"). mouseover (function () {
$ (ini) .find ("td"). addClass ("mouse_color");
});
/**
* Warna penghapusan tikus
*/
$ ("#tab tr"). mouseout (function () {
$ (ini) .find ("td"). Removeclass ("mouse_color");
});
4. Hasil desain
(1) Inisialisasi
(2) Klik pada baris aneh
(3) Klik bahkan baris
5. Lampiran
Salinan kode adalah sebagai berikut:
<%@ halaman bahasa = "java" import = "java.util.*" pageEncoding = "UTF-8"%>
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en">
<Html>
<head>
<title> tabel mengubah warna dengan mouse </iteme>
<meta http-equiv = "pragma" konten = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "kedaluwarsa" konten = "0">
<meta http-equiv = "kata kunci" content = "kata kunci1, kata kunci2, kata kunci3">
<meta http-equiv = "description" content = "This is my Page">
<script type = "text/javaScript" src = "../ skrip/jQuery-1.11.0.js"> </script>
<type style = "text/css">
.html_body .body_div {
Lebar: 1340;
Tinggi: 595;
}
.body_div {
font-size: 12px;
Latar Belakang-Color: #CCCCCC;
}
.tr_odd {
latar belakang-warna: oranye;
}
.tr_even {
Latar Belakang-Color: Aqua;
}
.mouse_color {
Latar Belakang: Hijau;
}
#tab {
Perbatasan: 1px #ff0000 solid;
Teks-Align: tengah;
Lebar: 100%;
Tinggi: 100%;
}
</tyle>
<type skrip = "Teks/JavaScript">
$ (function () {
// atur warna latar belakang garis aneh
$ ("#tab tr: ganjil"). find ("td"). addClass ("tr_odd");
// atur bahkan warna latar belakang garis
$ ("#tab tr: even"). find ("td"). addclass ("tr_even");
/**
* Warna mouse pindah ke
*/
$ ("#tab tr"). mouseover (function () {
$ (ini) .find ("td"). addClass ("mouse_color");
});
/**
* Warna penghapusan tikus
*/
$ ("#tab tr"). mouseout (function () {
$ (ini) .find ("td"). Removeclass ("mouse_color");
});
});
</script>
</head>
<body>
<div>
<tabel id = "tab">
<tr style = "latar belakang: #000000; warna: #fffff; font-weight: bolder;">
<TH> Nomor Kerja </th>
<th> nama </t>
<th> usia </t>
<th> gender </th>
</tr>
<tr>
<td> 2014010101 </td>
<td> Zhang Feng </td>
<td> 56 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010102 </td>
<td> li yu </td>
<td> 42 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010103 </td>
<td> wang ke </td>
<td> 36 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010104 </td>
<td> zhang yu </td>
<td> 31 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010105 </td>
<td> zhu gu </td>
<td> 44 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010106 </td>
<td> hu yu </td>
<td> 35 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010107 </td>
<td> liu xi </td>
<td> 30 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010108 </td>
<td> Sun yu </td>
<td> 45 </td>
<td> wanita </td>
</tr>
<tr>
<td> 2014010109 </td>
<td> hujan hijau </td>
<td> 33 </td>
<td> pria </td>
</tr>
<tr>
<td> 2014010110 </td>
<td> keyu </td>
<td> 45 </td>
<td> wanita </td>
</tr>
</boable>
</div>
</body>
</html>