Question

I have a table and a svg chart with rect’s in them.

I want to hover on the first column of the table and fill a the first rect of the chart and
when you hover on the second column of the table fill the second rect.

This is repeated 2

This is what works:

    $('tr td:nth-child(1)').mouseover(function(){
      $('rect:nth-of-type(1)').css("fill", "black" );
    });

    $('tr td:nth-child(2)').mouseover(function(){  
      $('rect:nth-of-type(2)').css("fill", "black" );
    });

but then i need to repeat myself 24 times. I tried this solution:

$('tr td:lt(24)').hover(
  function(){
    var index = $(this).index();
    $('rect').eq( index ).css("fill", "black" );
    },
  function(){
    var index = $(this).index();
    $('rect').eq( index ).css('fill', 'steelblue');
});

But now only the td’s of first row of the table are selected when you hover over the table.

Answer 1

Use tr:lt(24) td instead of td:lt(24). You want less than the 24th row, not the 24th column.