Class tersebut yaitu :
1. :event -> mencari baris ganjil
2. :odd -> mencari baris genap
Contoh script seperti dibawah ini :
<html>Contoh tampilan seperti dibawah ini :
<head>
<title>Tabel Zebra</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tbody tr:odd").addClass("genap");
$("tbody tr:even").addClass("ganjil");
});
</script>
<style type="text/css">
table {
border: 1px solid #000000;
}
thead th {
background-color: #44D818;
color : #FFFFFF;
font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
tbody tr {
font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
.genap {
background: url(hijaumuda.jpg) repeat-x bottom;
}
.ganjil {
background: url(hijautua.jpg) repeat-x bottom;
}
</style>
</head>
<body>
<table cellpadding="5">
<thead>
<tr>
<th>No</th>
<th>Buah</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apel</td>
</tr>
<tr>
<td>2</td>
<td>Melon</td>
</tr>
<tr>
<td>3</td>
<td>Semangka</td>
</tr>
<tr>
<td>4</td>
<td>Jeruk</td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.