Cara Membuat Event

Pada kesempatan kali ini kita akan belajar bagai mana cara membuat event pada tabel, Agar tampilan tabel kita terlihat lebih indah..
Langkah yang harus temen2 lakukan adalah:

Downloade jquery-1.8.0.min
kemudian ketikan source html berikut

<html>

<head>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("th").addClass("orange");
// odd untuk baris ganjil pada tabel
$("tr:odd").addClass("hijaumuda");
// even untuk baris genap pada tabel
$("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="300" border="0" cellpadding="4">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Perwira Abrianto</td>
<td>Yogyakarta</td>
</tr>
<tr>
<td>2</td>
<td>Beauty Khuluqiyah</td>
<td>Surakarta</td>
</tr>
<tr>
<td>3</td>
<td>Untung Slamet</td>
<td>Surabaya</td>
</tr>
<tr>
<td>4</td>
<td>Qori Adzani</td>
<td>Jakarta</td>
</tr>
</table>
</body>
</html>

Pages

EL - TADZOR

Cara Membuat Event

1 comments:

Blog Subscription

Follow me

Posts RSS

Facebook

Search this blog

Popular Posts

Arsip Blog