Langkah yang harus temen2 lakukan adalah:
- Downloade jquery-1.8.0.min
- kemudian ketikan source html berikut
- <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>
