Membuat Tabel HTML Menjadi Keren dengan jQuery

Masih di Seputar Teknologi Informasi | Kali ini Ane mau sharing cara membuat tampilan tabel di HTML tampak keren dengan jQuery. Bukan sulap-bukan sihir, tampilan tabel yang biasa saja di HTML ternyata bisa di buat keren banget dengan events jQuery. Kenapa tidak, dengan jenis mouse event jQuery maka efek background pada tabel akan berubah ketika di cursor diletakkan dalam tabel, ketika baris diklik 1x, baris diklik 2x, dan ketika tidak ada cursor. Mau lihat hasil tabel yang keren dengan jQuery. Berikut gambarnya:

events di jquery

Waw, gimana tuh Gan cara membuat tabel menjadi keren dengan jQuery? Yah, apa sih yang gak bisa dijQuery. He….berlebihan. Dengan mouse event jQuery maka setiap tingkah laku cursor pada tabel bisa diberi perintah. Caranya kita memilih element tabel untuk diperintahkan berubah warna background, jenis font, dll. dengan apa? Tentunya bantuan selector lalu dihubungkan dengan CSS.

Dari Contoh tabel di atas terlihat ketika mouse diletakkan pada baris akan berwarna merah, ketika klik 1x akan beribah biru walaupu mouse bergerak. dan jika diklik 2x maka akan berubah warna semula yaitu hijau. Berikut Kode jQuery membuat tabel menjadi keren di HTML:

<html>
<head>
<script src=”http://code.jquery.com/jquery-2.1.0.min.js“></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“th”).addClass(“orange”);
$(“tr:odd”).addClass(“hijaumuda”);
$(“tr:even”).addClass(“hijautua”);
$(“tr”).mouseover(function(){
$(this).addClass(“merahmuda”);
});
$(“tr”).mouseout(function(){
$(this).removeClass(“merahmuda”);
});
$(“tr”).click(function(){
$(this).toggleClass(“birumuda”);
});
});
</script>
<style type=”text/css”>
.hijaumuda{
background-color:#6f6;
}
.hijautua{
background-color:#0c3;
}
.orange{
background-color:#f60;
cursor:default;
}
.merahmuda{
background-color:#f06;
cursor:pointer;
}
.birumuda{
background-color:#09f;
}
</style>
</head>
<body>
<table width=”400″ border=”0″ cellpadding=”3″>
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Prodi</th>
</tr>
<tr>
<td>12110970</td>
<td>Candra Eka</td>
<td>TI</td>
</tr>
<tr>
<td>12110978</td>
<td>Evan Dimas</td>
<td>TI</td>
</tr>
<tr>
<td>12110979</td>
<td>Ganang Julianto</td>
<td>TI</td>
</tr>
<tr>
<td>12110989</td>
<td>Koriyanto</td>
<td>TI</td>
</tr>
</table>
</body>
</html>

Kopi paste kode di atas lalu simpan dengan nama tabelkeren.html. Nah buka file tersebut di web browser seperti chrome, mozilla, IE, Opera, dll. Kalau tidak berhasil silahkan download kode biki tabel keren dengan jQuery disini. Oke sekian sharing ane tentang membuat tabel(table) hml menjadi keren dengan jQuery. Semoga bermanfaat. Amin….

About Ganang Julianto 254 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

3 Comments

Leave a Reply

Your email address will not be published.


*