table and mouse rollover effect

by itsmikem

HTML

<table border="1">
	<tr>
		<td></td>
		<td>Banana</td>
		<td>Orange</td>
		<td>Plum</td>
	</tr>
	<tr>
		<td>Banana</td>
		<td>1:1</td>
		<td>1:2</td>
		<td>1:3</td>
	</tr>
	<tr>
		<td>Orange</td>
		<td>2:1</td>
		<td>1:1</td>
		<td>1,5:1</td>
	</tr>
	<tr>
		<td>Plum</td>
		<td>1:3</td>
		<td>2:1</td>
		<td>1:1</td>
	</tr>
</table>

CSS

td {
    height:60px;
    width:60px;
    text-align:center;    
}

td:hover{
    background-color:red;
}
table {
    border-collapse:collapse;
}

JavaScript

//highlight rows and columns
/*$("td").on({
    "mouseenter":function(){
        $(this).closest("tr").css("background","#f99");
        var col = $(this).index();
        var myTable = $(this).closest("table");
        var rows = $(myTable).find("tr");
        $(rows).each(function(ind,elem){
            var sel = String("td:nth-child(" + (col+1) + ")");
            $(this).find(sel).css("background","#f99");
        });
        $(this).css("background","#f00");
    },
    "mouseleave":function(){        
        $(this).closest("table").find("td,tr").css("background","none");        
    }
});*/
//highlight just the fruit cells
$("td").on({
    "mouseenter":function(){
        $(this).closest("tr").find("td:first-child").css("background","#f99");
        var col = $(this).index();
        $(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
        $(this).css("background","#f00");
    },
    "mouseleave":function(){        
        $(this).closest("table").find("td,tr").css("background","none");        
    }
});