dragos.bd dragos.bd - 5 months ago 11
jQuery Question

Highlighting row and column in a table

I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:

http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart


How can I highlight with limit like that?

Here is my table: https://jsfiddle.net/pkkbf9k2/

Answer

I think that's it: https://jsfiddle.net/8odoros/pkkbf9k2/4/

  $( "td" ).hover(
  function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index()+1;
    $('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
    myCol++; myRow--;
    $('table tbody td:nth-child('+myCol+')').each(function (index) {
        if(index<myRow)  $(this).addClass( "hover" );
    });
    $(this).addClass('hoverBold');
  }, function() {
    $( '*' ).removeClass( "hover" );
    $(this).removeClass('hoverBold');
  }
);