[modestes]

Приветствую!

Плохо знаком с JS, помогите пожалуйста разобраться в следующем.

Есть таблица (см.скрин)


Два общих тарифа
"Профи VDS" и "Бизнес VDS", в каждом из них по 4 тарифа, визуально на скрине обвел синей рамкой общие тарифы.

Нужно добиться следующего, к примеру при наведении на подтариф "Q3" подсвечивался этот столбец и плюс верхняя ячейка "Профи VDS"
т.е чтобы при наведении на один из четырех тарифов он подсвечивался вместе с верхней ячейкой под которой находится. На скрине примерно выделил красным.

Имеется вот такой код который использую для другой таблицы

<script>
    $(".order-hosting td").mouseover(function() {
        var tds = $( this ).parent().find("td"),
            index = $.inArray( this, tds );
        $(".order-hosting td:nth-child("+( index + 2 )+")").css("background-color", "#E0F1C2");
    }).mouseout(function() {
        var tds = $( this ).parent().find("td"),
            index = $.inArray( this, tds );
        $(".order-hosting td:nth-child("+( index + 2 )+")").css("background-color", "");
    });
  </script>

но этот код криво работает с таблицей которая на скрине, т.к верхние ячейки объеденные.

Мне подсказали решение подсветить сначала подтарифы, а потом через IF определять какой из подтарифов подсвечен и соответственно подсвечивать верхнюю ячейку которой он принадлежит.
Но из-за недостатка знаний не получается решить эту задачу.

Надеюсь на вашу помощь, спасибо!