Kali ini, saya masih mencoba untuk memberikan tutorial tentang memodifikasi tampilan tabel html dengan jquery, dengan kode sederhana. Tutorial ini masih berhubunngan dengan tutorial sebelumnya yaitu Tampilan Zebra Pada Tabel HTML-Jquery, kita hanya akan memodifikasi sedikit kodenya saja sehingga tampilan tabel html kita semakin menarik. Dari kode jquery yang telah dibuat sebelumnya kita tambahkan kode ini:
Kode Jquery
$('tbody tr').mouseover(function(){
$(this).addClass('over');
});
$('tbody tr').mouseout(function(){
$(this).removeClass('over');
});
Sehingga keseluruhan kode menjadi seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tes Tabel</title>
<link rel="stylesheet" href="style/table.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('ganjil');
$('tr:even').addClass('genap');
$('tbody tr').mouseover(function(){
$(this).addClass('over');
});
$('tbody tr').mouseout(function(){
$(this).removeClass('over');
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>No</th><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td><td>Fullan 1</td><td>Konokae</td><td>P</td>
</tr>
<tr>
<td>2</td><td>Fullan 2</td><td>Konokae</td><td>L</td>
</tr>
</table>
</body>
</html>
Dan pada css kita tambahkan class over bisa anda letakkan dimana saja yang anda sukai.
Kode CSS
.over{
background:#666600;
color:#FFFFFF;
}
Kode css secara keseluruhan:
@charset "utf-8";
/* CSS Document */
table{
border:2px solid #60BB9F;
background:#EBEBEB;
border-collapse:collapse;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
table th{
background:#60BB9F;
color:#FFFFFF;
padding:10px;
text-align:left;
}
table td{
padding:10px;
text-align:left;
}
.ganjil{
background:#8FD6CB;
color:#FFFFFF;
}
.genap{
background:#E8E8E8;
}
.over{
background:#666600;
color:#FFFFFF;
}
Untuk tampilan dari hasil kode tersebut adalah seperti dibawah ini:
Kode Jquery
$('tbody tr').mouseover(function(){
$(this).addClass('over');
});
$('tbody tr').mouseout(function(){
$(this).removeClass('over');
});
Sehingga keseluruhan kode menjadi seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tes Tabel</title>
<link rel="stylesheet" href="style/table.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('ganjil');
$('tr:even').addClass('genap');
$('tbody tr').mouseover(function(){
$(this).addClass('over');
});
$('tbody tr').mouseout(function(){
$(this).removeClass('over');
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>No</th><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td><td>Fullan 1</td><td>Konokae</td><td>P</td>
</tr>
<tr>
<td>2</td><td>Fullan 2</td><td>Konokae</td><td>L</td>
</tr>
</table>
</body>
</html>
Dan pada css kita tambahkan class over bisa anda letakkan dimana saja yang anda sukai.
Kode CSS
.over{
background:#666600;
color:#FFFFFF;
}
Kode css secara keseluruhan:
@charset "utf-8";
/* CSS Document */
table{
border:2px solid #60BB9F;
background:#EBEBEB;
border-collapse:collapse;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
table th{
background:#60BB9F;
color:#FFFFFF;
padding:10px;
text-align:left;
}
table td{
padding:10px;
text-align:left;
}
.ganjil{
background:#8FD6CB;
color:#FFFFFF;
}
.genap{
background:#E8E8E8;
}
.over{
background:#666600;
color:#FFFFFF;
}
Untuk tampilan dari hasil kode tersebut adalah seperti dibawah ini:
Gambar 1 Tabel tanpa efek hover
Gambar 2 Efek tabel hover
Jika kursor melintas dibaris pada tabel maka satu baris dari tebel tersebut akan berubah warnanya menjadi hijau pekat seperti pada gambar 2. Setelah kursor keluar dari area baris maka warna baris berubah menjadi hijau yang lebih muda seperti pada gambar 1. Demikian sedikit tutorial dari saya, semoga bermanfaat bagi anda dan selamat melanjutkan aktivitas anda, jika ada yang kurang berkenan dihati anda di dalam tulisan ini, saya mohon maaf yang sebesar-besarnya.
0 Response to "Efek Hover Pada Tabel HTML Dengan Jquery"
Post a Comment