Подсветка в таблице

[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 определять какой из подтарифов подсвечен и соответственно подсвечивать верхнюю ячейку которой он принадлежит.
Но из-за недостатка знаний не получается решить эту задачу.

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

[antonM]

Так подойдет?: http://jsfiddle.net/mXTSm/1/ или вот так: http://jsfiddle.net/5b5G6/

Вопрос надо в раздел по jQuery перенести.

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">

#My:hover tr#first td{
     background-color:cyan;
}
.selected-2 {
    background-color:#FCCEFC;
}
.selected {
    background-color:cyan;
}
</style>


<table id=My  border="1" cellspacing="2">
    <tbody>
  <tr id=first>
     <td colspan=4>ячейка 1</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
</tbody></table>



<script type="text/javascript">
$('#My tr:not("#first")').each (function() {
   $(this).find('td').each (function(i) {
     $(this).addClass('Col-'+i);
   });
});

$("#My  td[class^='Col-']").mouseenter(function() {
   var I=$(this).parent().find('td').index(this);
   $("#My td[class^='Col-"+I+"']").addClass('selected');
   $(this).parent().find('td').addClass('selected-2')
 }).mouseleave(function(){
   var I=$(this).parent().find('td').index(this);
   $("#My td[class^='Col-"+I+"']").removeClass('selected')
   $(this).parent().find('td').removeClass('selected-2')
 });
</script>

[kvmutl]

ваша задача решается без использования яваскрипта, на чистом ксс3 с использованием селекторов

[Deff]

kvmutl,
Задемонстрируйте ?