Подсветка столбцов и строк таблицы на jQuery
Ранее мы уже рассматривали скрипт подсветки строк в таблице реализованный на JavaScript и скрипт подсветки строк в таблице с использованием библиотеки jQuery. В данной теме мы хотим предложить Вам скрипт подсветки столбцов и строк в таблице при наведении на них курсора мышки. Основным отличием данного скрипта от предыдущих является то, что в данном скрипте мы можем выделять не только строки, но и столбцы, которым принадлежит ячейка, находящаяся под курсором мышки.
Для наглядной демонстрации работы предлагаемого нами скрипта подсветки столбцов и строк таблицы, обратите внимание на таблицу, расположенную чуть ниже. Поперемещайте курсор мышки по ячейкам данной таблицы, и Вы увидите, что строка и столбец, которым принадлежит ячейка, находящаяся под курсором мышки, изменяют свой цвет.
| Формат бумаги |
Тираж (шт.)/цена (руб.) | ||||||
| 100 шт | 500 шт | 1000 шт | 2000 шт | 3000 шт | 4000 шт | 5000 шт | |
| 90х50 | 450 р. | 1900 р. | 3700 р. | 5900 р. | 8100 р. | 10300 р. | 12500 р. |
| А7 (74х105) | 500 р. | 2300 р. | 4500 р. | 6300 р. | 8700 р. | 11100 р. | 13500 р. |
| А6 (105х148) | 600 р. | 2700 р. | 5200 р. | 7500 р. | 10500 р. | 13500 р. | 16500 р. |
| А5 (148х210) | 700 р. | 3100 р. | 6000 р. | 9900 р. | 14100 р. | 18300 р. | 22500 р. |
| А4 (210х297) | 1100 р. | 4800 р. | 9300 р. | 14300 р. | 20700 р. | 27100 р. | 33000 р. |
| А3 (297х420) | 2000 р. | 8000 р. | 15000 р. | 23500 р. | 30000 р. | 37000 р. | 45000 р. |
| А2 (420х594) | 4000 р. | 16000 р. | 30000 р. | 4700 р. | 60000 р. | 74000 р. | 90000 р. |
| Тиражи свыше 5000 шт. - по договоренности | |||||||
Данный скрипт может быть довольно полезным при использовании таблиц с большим количеством строк и столбцов, а также для таблиц, использующих мелкие шрифты, либо, когда отсутствуют границы ячеек. Может на данной таблице это и не очень наглядно продемонстрировано, но на больших таблицах эффект будет гораздо заметнее.
А теперь давайте перейдем непосредственно к реализации самого скрипта. Для начала понадобится подключать библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее для таблицы будет необходимо прописать стили, которые будут отвечать за ее оформление, за цвет подсветки столбцов, строк и ячеек:
<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>Далее обычным образом размещаем таблицу, предварительно добавив ей заранее заданный стиль. Таблицу мы немного уменьшили, т.к. главное - это ее структура:
<table class="lighting">
<tr class="up_row">
<td rowspan="2">Формат<br>бумаги</td>
<td colspan="7">Тираж (шт.)/цена (руб.)</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>
</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>
</tr>
<tr>
<td class="left_col">А7 (74х105)</td>
<td>500 р.</td><td>2300 р.</td><td>4500 р.</td><td>6300 р.</td>
<td>8700 р.</td><td>11100 р.</td><td>13500 р.</td>
</tr>
<tr>
<td class="left_col">А6 (105х148)</td>
<td>600 р.</td><td>2700 р.</td><td>5200 р.</td><td>7500 р.</td>
<td>10500 р.</td><td>13500 р.</td><td>16500 р.</td>
</tr>
<tr>
<td colspan="8" class="footer">Тиражи свыше 5000 шт. - по договоренности</td>
</tr>
</table>Теперь остается добавить 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>В скрипте мы специально не подсвечиваем ячейки с уже заданными стилями (заголовки таблицы, левую колонку и нижнюю строку), т.к. заголовки или нижняя строка, как в примере, могут состоять из нескольких ячеек.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.