Zebra Table

Pada table yang besar kadang sulit untuk fokus pada satu baris saja. Untuk mengatasi masalah ini digunakanlah metode zebra table. Dengan cara ini tabel akan lebih enak dilihat. Metode zebra tabel dapat dilakukan dengan CSS atau Javascript. Jika menggunakan CSS akan tidak efektik karena harus memasukkan class atau id pada setiap baris. Saya akan memberitahu cara membuat zebra tabel dengan Framework Javascript favorit saya yaitu Mootools.

Metode zebra tabel adalah metode yang membuat baris pada berbeda warna seperti zebra. Langsung saja pada cara membuat zebra tabel.

HTML

01.<table cellpadding="0" cellspacing="0">

02. 

03. <tr>

04.   <th>Nama</th>

05.   <th>Alamat</th>

06.   <th>Umur</th>

07. </tr>

08. 

09. <tr>

10.   <td>Arif Widipratomo</td>

11.   <td>Bandung</td>

12.   <td>19</td>

13. </tr>

14. 

15. <tr>

16.   <td>E.T</td>

17.   <td>Unknown</td>

18.   <td>Unknown</td>

19. </tr>

20. 

21.</table>

Mootools

01.window.addEvent('domready', function(){

02. 

03.//Buat variable untuk tag tr yang genap

04.//tr:even akan mengambil semua tag tr yang genap

05. var even = $$('tr:even');

06. 

07.//tr:odd akan mengambil semua tag tr yang ganjil

08.var odd = $$('tr:odd');

09. 

10.//memberikan class bernama 'even' pada semua tag tr yang genap

11.even.set('class','even');

12. 

13.//memberikan class bernama 'odd' pada semua tag tr yang ganjil

14. odd.set('class','odd');

15.});

CSS

1./**setiap class yang bernama even akan memiliki warna background #CCCCCC**/

2..even {background-color:#CCC;}

3. 

4./**setiap class yang bernama odd akan memiliki warna bakcground #F0F0F0**/

5..odd {background-color:#F0F0F0;}

Dengan Mootools semua tabel akan berubah warna secara otomatis jadi tidak perlu memberikan class pada setiap tag tr. Skrip yang mudah dan simple bukan? Selamat mencoba dan semoga membantu.

 Live-demo

Source : http://gadaguna.freevar.com/index.php/mootools/16-zebra-table-menggunakan-mootools-12