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
Mas, aplikasi web seperti apa yang paling banyak di gunakan orang sekarang?
makasih atas pencerahannya