Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подсветка в таблице (https://javascript.ru/forum/misc/31049-podsvetka-v-tablice.html)

modestes 24.08.2012 16:41

Подсветка в таблице
 
Приветствую!

Плохо знаком с 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 24.08.2012 17:20

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

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

Deff 24.08.2012 19:30

<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 26.08.2012 11:59

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

Deff 26.08.2012 12:14

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


Часовой пояс GMT +3, время: 19:48.