Table row and column highlighting with jquery

Question

The Script is here for highlighting table row and column with jquery. Demo Here

It highlights entire row and entire column on hover. I want hover only upto current cell and not to extend beyond the current cell row and column position.

Script

$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
  $(this).parent().addClass("hover");
  $("colgroup").eq($(this).index()).addClass("hover");
}
else {
  $(this).parent().removeClass("hover");
  $("colgroup").eq($(this).index()).removeClass("hover");
}
});

Any help ?

JS Fiddle

Answer 1

You can try this code:

HTML:

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>    

JS:

$('td').on('mouseover mouseout', function(){
             $(this).prevAll().addBack()
             .add($(this).parent().prevAll()
             .children(':nth-child(' + ($(this).index() + 1) + ')'))
             .toggleClass('hover');
      });

Demo.

Answer 2

Remove the .parent() and the $("colgroup") sections from your JavaScript.

See the updated fiddle here: http://jsfiddle.net/eMEq6/6/

Note that you most likely could do the same by just using CSS with the hover attribute.

$("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
      $(this).addClass("hover");
    }
    else {  
        $(this).removeClass("hover");
    }
});

Also, please note that you can do the same thing with only CSS (though early versions of browsers may not fully support it): http://jsfiddle.net/eMEq6/7/

td:hover {
    background-color: #eee;
}

Answer 3

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 tds 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