I assuming you want something like this:FIDDLE
For what you are trying to achieve you cannot give full rows/cols background colors. You need to add classes to cells individually.
And for that you first need to find the row and column index you are hovering on and highlight all td
s until that index on all previous rows:
$("table").delegate('td','mouseover mouseleave', function(e) {
var cellindex = 0;
if (e.type == 'mouseover') {
I am adding a class to the current hovered cell to know when to stop.
$(this).addClass("cell");
And iterating over all cells of the current row until i find that class.
var cells = $(this).parent().children("td");
for(var i=0;i<cells.length;i++){
if($(cells[i]).hasClass("cell")){
$(this).removeClass("cell");
cellindex = i;
break;
}
}
So the cellindex
gives me the current column, which we want to highlight up to.
Then i do the same for the row, i am adding a class to current hovered row to know when to stop.
$(this).parent().addClass("row");
var rows = $(this).parent().parent().children("tr");
And add hover class to all cells until the cellindex
i previously found.
for(var i=0;i<rows.length;i++){
var tds = $(rows[i]).children("td");
for(var j=0;j<=cellindex;j++){
$(tds[j]).addClass("hover");
}
if($(rows[i]).hasClass("row")){
$(this).parent().removeClass("row");
break;
}
}
}
Although you can keep that cell
and row
classes and do the reverse here, i am simply removing all hover classes from all tds.
else {
$("td").removeClass("hover");
}
});
EDIT: re-read the question, this might also be what you want, it's the same with slight changes: FIDDLE