Table row and column highlighting with jquery

css, html, jquery

Solution

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.

Problem

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

Original source