Подсветка строк в таблице на jQuery
Ранее мы уже рассматривали подобный скрипт Подсветки строк в таблице по клику и при наведении курсора мышки, но тот скрипт был на чистом JavaScript и занимал много места.
Поэтому хотим Вам предложить более универсальный скрипт подсветки строк в таблице при помощи jQuery. Данный скрипт позволяет осуществляет подсветку строк таблицы, находящихся в данный момент под курсором мышки, а при клике по какой-либо строке таблицы, она будет выделена заданным цветом. При повторном клике по выделенной строке, выделение цветом пропадет. Также допускается выделение заданным цветом нескольких строк.
Обратите внимание на таблицу, расположенную ниже. Наведите курсор мышки на строки данной таблицы и покликайте по ним.
| Первый столбец | Второй столбец | |
| 1) | #FF0000 | Красный |
|---|---|---|
| 2) | #FFFF00 | Желтый |
| 3) | #00FF00 | Лайм |
| 4) | #0000FF | Синий |
Как видно, подсветка и выбор строк в данной таблице смотрятся довольно эффектно. Выделение строк по клику может пригодиться в тех случаях, когда пользователь остановил свой выбор на нескольких значениях в строках и сравнивает их. Обратите внимание, что заголовки столбцов и нумерация строк не выделяются при наведении курсора или клике.
Чтобы получить подобную таблицу с подсвечивающими строками и мультивыбором строк, для начала пропишем стиль для номеров строк и заголовка столбцов. Для этого вставьте на своем сайте между тегами <head> и </head> следующий код:
<style type="text/css">
.color_table { border: 1px solid black; cursor: pointer; border-collapse: collapse; }
.color_table th, #first_tr { background-color: lightblue; }
</style>Далее, в том месте странички, где будет располагаться Ваша таблица, у которой мы будем подсвечивать строки, добавляем таблицу следующим образом:
<table class="color_table">
<tr id="first_tr">
<td style="width: 25px;"></td>
<td style="width: 170px;">Первый столбец</td>
<td style="width: 170px;">Второй столбец</td>
</tr>
<tr>
<th>1)</th><td>#FF0000</td><td>Красный</td>
</tr>
<tr>
<th>2)</th><td>#FFFF00</td><td>Желтый</td>
</tr>
<tr>
<th>3)</th><td>#00FF00</td><td>Лайм</td>
</tr>
<tr>
<th>4)</th><td>#0000FF</td><td>Синий</td>
</tr>
</table>Далее для работы скрипта нам потребуется библиотека jQuery. Если на Вашем сайте данная библиотека еще не подключена, то следует ее подключить следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Теперь Вам остается только добавить наш скрипт, который будет подсвечивать строки таблицы под курсором мышки и выделять их по клику. Для этого скопируйте следующий код:
<script type="text/javascript">
$(document).ready(function(){
$(".color_table tr:not(#first_tr)").addClass("colors");
$(".colors:last").css("background-color", "#90ee90");
var tr_clr = $(".colors:last").css("background-color");
$(".colors:last").css("background-color", "white");
$(".colors").hover(function(){
if ($(this).css("background-color")!=tr_clr)
$(this).css("background-color", "yellow")},function(){
if ($(this).css("background-color")!=tr_clr)
$(this).css("background-color", "white")
});
$(".colors").click(function(){
if ($(this).css("background-color")!=tr_clr)
$(this).css("background-color",tr_clr)
else $(this).css("background-color","yellow")
});
});
</script>В результате у Вас на сайте должна появиться точно такая же таблица, как и в примере, при наведении на строки которой они будут приобретать желтый фон, а при клике на них, фон станет зеленоватым.
Вы наверняка обратили внимание на следующий участок кода:
$(".colors:last").css("background-color", "#90ee90");
var tr_clr = $(".colors:last").css("background-color");
$(".colors:last").css("background-color", "white")Хотим Вас уверить, что тут нет никакой ошибки и это сделано специально. Вся суть заключается в том, что разные браузеры хранят в переменных цвета в различных форматах. Так вот для того, чтобы не прописывать для каждого браузера в переменную цвет отдельно, мы пошли на хитрость, путем присвоения последней строке таблицы нужного цвета, для последующего считывания данного цвета в нужном формате в переменную и перекрашивание строчки обратно в белый цвет.
Если вдруг Вам потребуется подсвечивать и выделять цветом не строки, а отдельные ячейки в таблице, то Вам просто потребуется в строку $('.color_table tr:not(#first_tr)').addClass("colors"); добавить td после (#first_tr).
P.S. После поступления нескольких рекомендаций по улучшению работы скрипта, код был доработан и выложен в виде новой темы - JQuery подсветка строк таблицы.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
строчку: $(".colors").css("background-color","white");
$(".colors").click(function(){
if ($(this).css("background-color")!=tr_clr) {
$(".colors").css("background-color","white");
$(this).css("background-color",tr_clr)
}
else $(this).css("background-color","yellow")
});
Но работать будет только при подключении дополнительной библиотеки JQuery UI.
В цикле это выглядит так:
$y++;
($y & 1) ? $color='#CDCDCD' : $color='white';
echo '<tr style="background-color: '.$color.'">';
Используя Ваш код, что нужно добавить, чтобы у меня, после снятия наведения/выделения по клику, строка окрашивалась в её "родной цвет", сгенерированный php?