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>

Run the Jelo Shot above by clicking the orange icon, then click here to reset the table.
Stock Information (demo only!)
Company Price Change
Alcoa Inc. $29.01 +0.42
General Motors Corporation $30.27 +1.09
Hewlett-Packard Co. $36.53 -0.03
Microsoft Corporation $25.84 -0.14
Wal-Mart Stores, Inc. $45.45 +0.73

See Jelo API for complete details.