Подсветка

Опубликовано Ksenia-Polo - ср, 04/24/2019 - 14:51

Чистый css

код нужно поместить в начало файла css

tr:hover { background: yellow; }

 

table {

  overflow: hidden;

}

 

tr:hover {

  background-color: #ffa;

}

 

td:hover::after,

th:hover::after {

  content: "";

  position: absolute;

  background-color: #ffa;

  left: 0;

  top: -5000px;

  height: 10000px;

  width: 100%;

  z-index: -1;

}

Еще.

1) HTML:

<table> <colgroup /> <colgroup /> <colgroup /> ... </table>

CSS:

.hover { ... }

JQuery:

// Подсвечивать столбцы и строки при наведении мыши в перекрестье $('table').delegate('td.input', 'mouseover mouseleave', function (e) { $(this).parent().toggleClass('hover', e.type == 'mouseover'); $('colgroup').eq($(this).index()).toggleClass('hover', e.type == 'mouseover'); });

2)Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору. Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background.

Поскольку правило будет распространяться на все строки таблицы, что не всегда желательно, то в таблицу можно добавить тег <tbody>, внутри которого цвет строк будет меняться

3)http://ir2.ru/table_column_highlight.aspx

https://www.devmarks.ru/blog/click-only-once.html

4)http://usefulscript.ru/lighting_column.php

А теперь давайте перейдем непосредственно к реализации самого скрипта. Для начала понадобится подключать библиотеку jQuery следующим образом:

JavaScript код:

Выделить

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

Далее для таблицы будет необходимо прописать стили, которые будут отвечать за ее оформление а так же за цвет подсветки столбцов, строк и ячеек:

HTML код:

Выделить

<style type="text/css">
 .lighting { width: 100%; border-collapse: collapse; border: 2px solid #000000; }
 .lighting tr { text-align: center; font-weight: bold; line-height: 2; }
 .lighting tr td { border: 1px solid #000000; }
 .lighting .up_row, .lighting .left_col { background-color: #006600; color: #FFFFFF; }
 .lighting tr .footer { background-color: #33CC33; }
 .lighting_col { background-color: #99CCFF; }
 .lighting_cell { background-color: #FFFF00; }
</style>

Далее обычным образом размещаем таблицу, предварительно добавив ей заранее заданный стиль. Таблицу мы немного уменьшили, т.к. главное - это ее структура:

HTML код:

Выделить

<table class="lighting">
<tr class="up_row">
<td rowspan="2">Формат<br>бумаги</td>
<td colspan="8">Тираж (шт.)/цена (руб.)</td>
</tr>
<tr class="up_row">
<td>100 шт</td><td>500 шт</td><td>1000 шт</td><td>2000 шт</td>
<td>3000 шт</td><td>4000 шт</td><td>5000 шт</td><td>10000 шт</td>
</tr>
<tr>
<td class="left_col">90х50</td>
<td>450 р.</td><td>1900 р.</td><td>3700 р.</td><td>5900 р.</td>
<td>8100 р.</td><td>10300 р.</td><td>12500 р.</td><td>24000 р.</td>
</tr>
<tr>
<td class="left_col">А7&nbsp;(74х105)</td>
<td>500 р.</td><td>2300 р.</td><td>4500 р.</td><td>6300 р.</td>
<td>8700 р.</td><td>11100 р.</td><td>13500 р.</td><td>27000 р.</td>
</tr>
<tr>
<td class="left_col">А6&nbsp;(105х148)</td>
<td>600 р.</td><td>2700 р.</td><td>5200 р.</td><td>7500 р.</td>
<td>10500 р.</td><td>13500 р.</td><td>16500 р.</td><td>32000 р.</td>
</tr>
<tr>
<td class="left_col">А5&nbsp;(148х210)</td>
<td>700 р.</td><td>3100 р.</td><td>6000 р.</td><td>9900 р.</td>
<td>14100 р.</td><td>18300 р.</td><td>22500 р.</td><td>43000 р.</td>
</tr>
<tr>
<td colspan="9" class="footer">Тиражи свыше 10000 шт - по договоренности.</td>
</tr>
</table>

Теперь остается добавить JavaScript код, который и будет подсвечивать необходимые нам столбцы и строки. Для этого скопируйте приведенный ниже JavaScript код:

JavaScript код:

Выделить

<script type="text/javascript">
$(document).ready(function(){
$(".lighting td:not(.footer,.left_col)").on("mouseenter mouseleave", function(){
    if ($(this).parents(".lighting tr").attr("class")!="up_row") {
        var td_index=$(this).index();
        $(this).parents("tr").toggleClass("lighting_col");
        $(this).parents(".lighting").find("tr:not(.up_row)").each(function(){
            $("td:eq("+td_index + ")",this).toggleClass("lighting_col");
        });
        $(this).toggleClass("lighting_cell");
    }
});
});
</script>

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