Парение на x колонке таблицы и заполняет x элемент

У меня есть таблица и диаграмма svg с rect's в них.

Я хочу толпиться на первой колонке таблицы и заполниться, первые реагируют диаграммы и когда вы толпитесь на второй колонке таблицы, заполняются, вторые реагируют.

Это повторяется 2

Это что работы:

    $('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" );
    });

но тогда я должен повторить меня 24 раза. Я попробовал это решение:

$('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');
});

Но теперь только td's первого ряда стола отобран, когда вы нависаете над столом.

0
nl ja de
Вы пробовали tr:lt (24) троланд ?
добавлено автор Explosion Pills, источник
спасибо, которое было правом anser:)
добавлено автор user1386906, источник

1 ответы

Используйте tr:lt (24) троланд вместо td:lt (24) . Вы хотите меньше, чем 24-е ряд , не 24-я колонка.

1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda