What's a Jelo Shot? How do I use these tutorials?

Tutorial: Fancy Table Rows

Alternate row color

<!-- relevant CSS -->
<style type="text/css">
    .even td, .even th {
        background: #abc;
    }
    .odd td, .odd th{
        background: #def;
    }
</style>


<!-- relevant HTML -->
<table class="alternate">
    <caption>Stock Information (demo only!)</caption>
    <tr>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
    </tr>
    <tr>
        <td>Alcoa Inc.</td>
        <td>$29.01</td>
        <td>+0.42</td>
    </tr>
    ...
    <tr>
        <td>Wal-Mart Stores, Inc.</td>
        <td>$45.45</td>
        <td>+0.73</td>
    </tr>
</table>

<!-- relevant JavaScript -->
<script type="text/javascript">
    Jelo.each($$('.example tr'), function(item, index) {
        Jelo.CSS.addClass(this, (index % 2) ? 'even' : 'odd');
    });
</script>

See Jelo API for complete details.