Membuat zebra stripe table atau kalau diartikan membuat warna yang berbeda – beda pada tiap2 baris pada table html memang sangat mudah bila memanfaatkan CSS, memang banyak dari web design memanfaatkan CSS untuk melakukan design akan tetapi berbeda halnya bila kalian ingin memberi sedikit animasi pada tiap – tiap baris yang di hover, kurang efektif menurut saya bila melakukan penulisan 2 kali dari sisi css dan dari sisi javascript. Pada artikel kali ini kita akan sedikit membuat Zebra stripe table dengan memanfaatkan jquery sebagai framework + sedikit sentuhan animasi
Buat terlebih dahulu file html misal index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<title>Jquery zebra table</title>
<style>
table{background-color: #D4D4D4;}
table th, table td{font-size: 12px;padding: 3px;}
</style>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.2.min.js”></script> // saya menggunakan jquery versi online
</head>
<body>
<table id=”table” cellpadding=”2″ cellspacing=”2″>
<thead>
<tr>
<th>NIM</th>
<th>NAMA</th>
<th>FAKULTAS</th>
<th>JURUSAN</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456789</td>
<td>Benny dolo</td>
<td>Teknik</td>
<td>Elektro</td>
</tr>
<tr>
<td>123456790</td>
<td>Entis sutisna</td>
<td>Ekonomi</td>
<td>Management</td>
</tr>
<tr>
<td>123456789</td>
<td>Benny dolo</td>
<td>Teknik</td>
<td>Elektro</td>
</tr>
<tr>
<td>123456790</td>
<td>Entis sutisna</td>
<td>Ekonomi</td>
<td>Management</td>
</tr>
</tbody>
</table>
</body>
</html>
Lalu tambahkan sedikit javascript seperti dibawah
<script type=”text/javascript”>
$(function(){
$(‘tbody tr:odd’).css(“background-color”,”#F5F5F5″); // buat background pada baris ganjil
$(‘tbody tr:even’).css(“background-color”, “#EEFFEE”); // buat background pada baris genap
$(‘tbody tr’).hover(function(){ // bila bairs tersebut di hover jalankan kondisi dibawah
$(this).data(“background-color”, $(this).css(“background-color”)); // mengambil background yg aktif saat ini.
$(this).css(“background-color”, “#FFFFFF”); // ubah background menjadi warna putih
}, function(){
$(this).css(“background-color”, $(this).data(“background-color”)); // Kembalikan background kewarna aslinya
});
});
</script>
Inti dari script diatas adalah mengubah baris ganjil (odd) dan baris genap (even) pada sebuah tabel.
Mudah bukan, kalian dapat menambahkan sedikit animasi saat hover atau apalah terserah kalian.