Tablas estilo Zebra con jQuery

Solución que permite evitarnos de ensuciar con class="" el html

by cristian_cena

HTML

<table id="zebra" width="500" align="center">
<thead>
<tr>
<th>Example Title</th>
<th>Example Title</th>
<th>Example Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
<tr>
<td>Some Content Here</td>
<td>Some Content Here</td>
<td>Some Content Here</td>
</tr>
</tbody>
<tfoot> </tfoot>
<caption>Cebra con jQuery - Demo</caption>
</table>

CSS

.zebra {
    background-color: #9CF;     
    color: #fff; 
}
caption {
    font-weight: bold; 
    color: #ff0000; 
    font-size: 14pt;
}
#zebra td {
    padding: 5px; 
}
.grey { 
    background-color: #ddd; 
}
.blue{
    background:#3d71a1; color:white;
}

JavaScript

// fuente: http://www.simcomedia.com/css-and-jquery-zebra-stripes

$(document).ready(function() {
    $('#zebra tbody tr:even').addClass('zebra');
    /*HOVER's: start*/
        $('#zebra tbody tr:even').mouseover(function(){
            $(this).removeClass('zebra');
            $(this).addClass('blue');
            $('#zebra tbody tr:even').mouseout(function(){
                $(this).removeClass('blue');
                $(this).addClass('zebra');
            });
        });
        $('#zebra tbody tr:odd').mouseover(function(){
            $(this).addClass('grey');
            $('#zebra tbody tr:odd').mouseout(function(){
                $(this).removeClass('grey');
            });
    
        });
    /*HOVER's: end*/
});