Membuat Zebra Table dengan Jquery

Intro

Beberapa waktu yang lalu kita mencoba mereview web aplication yang telah kita buat. Sampai akhirnya pada menu reporting, saya buka salah satu report lalu saya cermati, kok terlikhat ada yang kurang. dengan tampilan seperti ini tentunya user akan sulit menentukan satu kesatuan record dalam 1 baris.

Saya berfikir akan lebih baik kalau kita bisa menampilkan data report dalam zebra table maksudnya baris genap dan baris ganjil berbeda warnanya.

Langkah yang saya lakukan adalah buka google cari tentang zebra table ini, kebetulan dapat yang pembuatan zebaranya menggunakan jquery, makin cinta aja nih amna jquery.

Oke langsung kita buat codingnya.

<html>
<head>
<script src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
 </script>
<style type="text/css">

body {
	background: #fff;
}

table {
	border-collapse: collapse;
	width: 50%;
	margin: 24px;
	font-size: 1.1em;
}

th {
	background: #3e83c9;
	color: #fff;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	border-right: 1px solid #fff;
	line-height: 1.2;
}

td {
	padding: 6px 11px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;
}

td * {
	padding: 6px 11px;
}

tr.alt td {
	background: #ecf6fc;
}

tr.over td, tr:hover td {
	background: #bcd4ec;
}

</style>
</head>
<body>

<table id="mytable" class="stripeMe">
	<thead>

		<tr>
			<th>NIM</th>
			<th>Nama</th>
			<th>Nilai</th>
			<th>Grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>201035002</td>
			<td>Abdul Manaf</td>
			<td>85</td>
			<td>A</td>
		</tr>
		<tr>
			<td>201035003</td>
			<td>Agus Haryanto</td>
			<td>90</td>
			<td>A</td>		
		</tr>
		<tr>
			<td>201035004</td>
			<td>Agus Suharto</td>
			<td>81</td>
			<td>A</td>			
		</tr>
		<tr>
			<td>201035005</td>
			<td>Budi Sumaryanto</td>
			<td>75</td>
			<td>B</td>			
		</tr>
		<tr>
			<td>201035006</td>
			<td>Beni Zainuri</td>
			<td>79</td>
			<td>B</td>			
		</tr>
		<tr>
			<td>201035007</td>
			<td>Dodi Hermawan</td>
			<td>85</td>
			<td>A</td>			
		</tr>
		<tr>
			<td>201035008</td>
			<td>Eko Widodo</td>
			<td>78</td>
			<td>B</td>			
		</tr>
		<tr>
			<td>201035009</td>
			<td>Faizal Hidayat</td>
			<td>87</td>
			<td>A</td>			
		</tr>
		<tr>
			<td>201035010</td>
			<td>Komarudin</td>
			<td>88</td>
			<td>A</td>			
		</tr>
		<tr>
			<td>201035011</td>
			<td>Maman Abdurahman</td>
			<td>73</td>
			<td>B</td>			
		</tr>
	</tbody>
</table>

</body>
</html>

a

2 comments to Membuat Zebra Table dengan Jquery

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>