Table - usable highlighting of hovered cells

by Joe Saad

HTML

<table>
<tr>
    <th>Name</th>
    <th>Age</th>
    <th>Degree</th>
    <th>State</th>
</tr>
<tr>
    <td>Tom</td>
    <td>21</td>
    <td>High School</td>
    <td>TX</td>
</tr>
<tr>
    <td>Simon</td>
    <td>24</td>
    <td>Associate Deg</td>
    <td>TX</td>
</tr>
    <tr>
    <td>James</td>
    <td>29</td>
    <td>BA Deg</td>
    <td>NY</td>
</tr>
</table>

CSS

th{font-weight:bold;}
td {border:1px solid blue; padding:5px;}
table {width:420px;}

JavaScript

$(function() {
    $('th').hover(

    function() {
        var ct_col = $(this).index() + 1;
        $('td:nth-child(' + ct_col + ')').css('background-color', '#ff00ff');
    }, function() {
        var ct_col = $(this).index() + 1;
        $('td:nth-child(' + ct_col + ')').css('background-color', '#ffffff');
    });



    $('td').hover(

    function() {
        var ct_col = $(this).index() + 1;
        var ct_row = $(this).parent().index()+1;
        //alert(ct_row+","+ct_col);
        $('td:nth-child(' + ct_col + ')').css('background-color', '#daa520');
        $('tr:nth-child(' + ct_row + ')').css('background-color', '#daa520');        
    }, function() {
        var ct1_col = $(this).index() + 1;
        var ct1_row = $(this).parent().index()+1;
        //alert(ct_row+","+ct_col);
        
        $('tr:nth-child(' + ct1_row + ')').css('background-color', '#ffffff'); 
$('td:nth-child(' + ct1_col + ')').css('background-color', '#ffffff');        
    });

});