Zebra stripe table dengan jquery

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.

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!