About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

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

Share

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=""> <strike> <strong>

Spam protection by WP Captcha-Free