dragos.bd dragos.bd - 1 year ago 82
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:


How can I highlight with limit like that?

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

Answer Source

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" );
  }, function() {
    $( '*' ).removeClass( "hover" );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download