Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Tips Simpel Buat Tabel Zebra (Belang - Belang) dengan jQuery

Jika kamu banyak membuat web aplikasi yang akan mendisplay banyak data dalam bentuk tabel - tabel, maka tidak ada salahnya mempercantik data tabel anda agar terlihat lebih elegan dan lebih enak dibaca oleh user yang memakai nantinya dengan menampilkan data di tabel dengan style Tabel Zebra (Belang - Belang).

Untuk bisa menampilkan data tabel dengan style zebra (belang - belang), di mengapply style yang berbeda untuk tiap baris data tabel (row) yang diposisi ganjil dan genap dengan style yang berbeda. seperti contoh dibawah ini.

Untuk Tabelnya saya akan menggunakan contoh data tabel seperti berikut ini
<table id="rounded-corner">
<thead>
<tr>
<th class="left">Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th class="right">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Microsoft</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>Google</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>Apple</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr>
<td>IBM</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>


Untuk style tabel bisa menggunakan style css seperti berikut
#rounded-corner
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#rounded-corner thead th.left
{
background: #b9c9fe url('img/left.png') left -1px no-repeat;
}
#rounded-corner thead th.right
{
background: #b9c9fe url('img/right.png') right -1px no-repeat;
}
#rounded-corner th
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}
 
#rounded-corner td
{
padding: 8px;
border-top: 1px solid #fff;
color: black;
font-weight: bold;
}
 
#rounded-corner tbody tr:hover td
{
background: gray;
}
 
#rounded-corner tbody tr.genap
{
background-color: cyan;
}
 
#rounded-corner tbody tr.ganjil
{
background-color: pink;
}


Untuk memudahkan dalam appaly style zebra (belang-belang) nya kita apply classnya melewati jquery saja karena lebih simpel dan tidak ribet nantinya di server script phpnya. phpnya cukup generate tabel seperti biasa tanpa perlu kasih class genap ganjilnya. untuk apply class genap ganjilnya kita pake jquery saja lebih simpel. Contohnya seperti ini
$(document).ready(function(){
$("#rounded-corner tbody tr:even").addClass('genap');
$("#rounded-corner tbody tr:odd").addClass('ganjil');
});


Cukup simpel untuk membuat aplikasi anda tampak lebih bagus dan menarik :D
Untuk melihat Demo dari Tips ini atau mau mendownload source code contohnya bisa langsung ke link artikel dibawah ini
Tips Simpel Buat Tabel Zebra (Belang - Belang) dengan jQuery

Ditunggu komentarnya. :)
Sign In or Register to comment.