Highlight row in a table on hover

by Joe Saad

HTML

<table>
<tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
    <th>State</th>
    <th>Degree</th>
</tr>
    <tr>
        <td>John</td>
        <td>21</td>
        <td>Portland</td>
        <td>OR</td>
        <td>Associate Deg</td>        
    </tr>
<tr>
        <td>Alex</td>
        <td>25</td>
        <td>Los Angeles</td>
        <td>CA</td>
        <td>BA</td>        
    </tr>
<tr>
        <td>Peter</td>
        <td>29</td>
        <td>Seatle</td>
        <td>WA</td>
        <td>MBA</td>        
    </tr>
</table>

CSS

td {cursor:default;width:100px;}

JavaScript

$(function() {
    $('td').hover(function() {
        $(this).parent().css('background-color', '#ccc');
    }, function() {
        $(this).parent().css('background-color', '#fff');

    });

});