Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables — tables with alternating row background colors.
Read The Full Tutorial.
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables — tables with alternating row background colors.
The CSS
view plaincopy to clipboardprint
1. .highlight { background:#d5fcdc; }
2. .even { background:#fff; }
3. .mo { background:#e3f1fb; }
4. .odd { background:#eee; }
5. .zebra th { padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
6. .zebra td { padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }
.highlight { background:#d5fcdc; }
.even { background:#fff; }
.mo { background:#e3f1fb; }
.odd { background:#eee; }
.zebra th { padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
.zebra td { padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }
The above CSS is extremely basic. I've styled the <TH> tag so that it stands out from table rows. There are four states of rows in my zebra table: highlighted (or "clicked on"), regular even and odd, and a mouseover state — these are represented by the "even", "mo", "highlight", and "odd" classes. I've added padding and a bottom border to the <TD>'s for presentation.
The XHTML
view plaincopy to clipboardprint
1. <table class="zebra" cellpadding="0" cellspacing="0">
2. <tr>
3. <th>Award</th>
4. <th>Actor</th>
5. <th>Film</th>
6. </tr>
7. <tr>
8. <td>Actor In A Leading Role</td>
9. <td>Daniel Day-Lewis</td>
10. <td>There Will Be Blood</td>
11. </tr>
12. <tr>
13. <td>Actress In A Leading Role</td>
14. <td>Marion Cotillard</td>
15. <td>La Vie en Rose</td>
16. </tr>
17. <tr>
18. <td>Actor In A Supporting Role</td>
19. <td>Javier Bardem</td>
20. <td>No Country For Old Men</td>
21. </tr>
22. <tr>
23. <td>Actress In A Supporting Role</td>
24. <td>Tilda Swinton</td>
25. <td>Michael Clayton</td>
26. </tr>
27. <tr>
28. <td>Directing</td>
29. <td>Joel Coen and Ethan Coen</td>
30. <td>No Country For Old Men</td>
31. </tr>
32. <tr>
33. <td>Writing</td>
34. <td>Diablo Cody</td>
35. <td>Juno</td>
36. </tr>
37. </table>
<table class="zebra" cellpadding="0" cellspacing="0">
<tr>
<th>Award</th>
<th>Actor</th>
<th>Film</th>
</tr>
<tr>
<td>Actor In A Leading Role</td>
<td>Daniel Day-Lewis</td>
<td>There Will Be Blood</td>
</tr>
<tr>
<td>Actress In A Leading Role</td>
<td>Marion Cotillard</td>
<td>La Vie en Rose</td>
</tr>
<tr>
<td>Actor In A Supporting Role</td>
<td>Javier Bardem</td>
<td>No Country For Old Men</td>
</tr>
<tr>
<td>Actress In A Supporting Role</td>
<td>Tilda Swinton</td>
<td>Michael Clayton</td>
</tr>
<tr>
<td>Directing</td>
<td>Joel Coen and Ethan Coen</td>
<td>No Country For Old Men</td>
</tr>
<tr>
<td>Writing</td>
<td>Diablo Cody</td>
<td>Juno</td>
</tr>
</table>
The above table is a simple, standard table. The only detail of note is that this table is given the "zebra" class, which signals to MooTools that this table should be zebra-ized.
The Javascript Class
view plaincopy to clipboardprint
1. /* classes */
2. var ZebraTables = new Class({
3. //initialization
4. initialize: function(table_class) {
5.
6. //add table shading
7. $$('table.' + table_class + ' tr').each(function(el,i) {
8.
9. //do regular shading
10. var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);
11.
12. //do mouseover
13. el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });
14.
15. //do mouseout
16. el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });
17.
18. //do click
19. el.addEvent('click',function() {
20. //click off
21. if(el.hasClass('highlight'))
22. {
23. el.removeClass('highlight').addClass(_class);
24. }
25. //click on
26. else
27. {
28. el.removeClass(_class).removeClass('mo').addClass('highlight');
29. }
30. });
31.
32. });
33. }
34. });
/* classes */
var ZebraTables = new Class({
//initialization
initialize: function(table_class) {
//add table shading
$$('table.' + table_class + ' tr').each(function(el,i) {
//do regular shading
var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);
//do mouseover
el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });
//do mouseout
el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });
//do click
el.addEvent('click',function() {
//click off
if(el.hasClass('highlight'))
{
el.removeClass('highlight').addClass(_class);
}
//click on
else
{
el.removeClass(_class).removeClass('mo').addClass('highlight');
}
});
});
}
});
The class accepts one parameter, which is the class given to tables that should be Zebra-ized. Upon initialization, the class cycles through each table row. During the row looping, the row is given its odd or even CSS class, and a listener is added to the row to highlight the row upon mouseover. The above javascript could be placed into an external javascript file.
The Javascript Implementation
view plaincopy to clipboardprint
1. /* do it! */
2. window.addEvent('domready', function() {
3. var zebraTables = new ZebraTables('zebra');
4. });
/* do it! */
window.addEvent('domready', function() {
var zebraTables = new ZebraTables('zebra');
});
To implement ZebraTables, all you need to do is add the above code to any given page.
source: davidwalsh
|
Ajax Projects
