title: Hover on the x column of the table and fill x element
body: <p>I have a table and a svg chart with rect's in them.</p>
  
  <p>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.</p>
  
  <p>This is repeated 2</p>
  
  <p>This is what works:</p>
  
  <pre><code>    $('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" );
      });
  </code></pre>
  
  <p>but then i need to repeat myself 24 times. I tried this solution:</p>
  
  <pre><code>$('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');
  });
  </code></pre>
  
  <p>But now only the td's of first row of the table are selected when you hover over the table.</p>