JQuery подсветка строк таблицы разными цветами

[Admin]

Данная тема содержит модификацию скрипта из темы JQuery подсветка строк таблицы.
Как Вы могли догадаться из названия темы, основным отличием предлагаемого в этой теме скрипта от первоначального является использование нескольких цветов для подсветки строк в таблице после клика по ним.

В целом скрипт мало изменился, просто пришлось добавить в JavaScript коде пару селекторов для выбора строк и пару стилей.

Приведем код целиком:

Код:

<style type="text/css">
.color_table { border: 1px solid black; border-collapse: collapse; margin: 0 auto; }
.color_table th, .first_tr { background-color: #AADDEE; }
.hover_color { background-color: #FFFF00 !important; }
.color1 { background-color: #66FF66 !important; }
.color2 { background-color: #6666FF !important; }
.color3 { background-color: #FF6666 !important; }
</style>

<table class="color_table">
<tr class="first_tr">
  <td style="width: 25px;"></td><td style="width: 150px;">Первый столбец</td><td style="width: 150px;">Второй столбец</td>
</tr>
<tr>
  <th>1)</th><td>Значение №1</td><td>Значение №2</td>
</tr>
<tr>
  <th>2)</th><td>Значение №3</td><td>Значение №4</td>
</tr>
<tr>
  <th>3)</th><td>Значение №5</td><td>Значение №6</td>
</tr>
<tr>
  <th>4)</th><td>Значение №7</td><td>Значение №8</td>
</tr>
<tr>
  <th>5)</th><td>Значение №9</td><td>Значение №10</td>
</tr>
<tr>
  <th>6)</th><td>Значение №11</td><td>Значение №12</td>
</tr>
<tr>
  <th>7)</th><td>Значение №13</td><td>Значение №14</td>
</tr>
</table>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".color_table tr:not(.first_tr)").hover(function(){ $(this).addClass("hover_color") },
    function(){ $(this).removeClass("hover_color") }
);

$(".color_table tr:not(.first_tr):nth-child(3n)").click(function(){
    $(this).toggleClass("color1");
});
$(".color_table tr:not(.first_tr):nth-child(3n+1)").click(function(){
    $(this).toggleClass("color2");
});
$(".color_table tr:not(.first_tr):nth-child(3n+2)").click(function(){
    $(this).toggleClass("color3");
});
});
</script>

В результате поле кликов строки 3, 6, 9 и т.д. будут одного цвета, строки 1, 4, 7, 10 и т.д. второго цвета и, наконец строки 2, 5, 8 и т.д. - третьего.

Для примера приведем скрин таблицы в которой кликнули по строкам с номерами 1), 2), 3), 6), и 7).

[ukr109]

Здравствуйте! Вопрос возник. Как сделать чтобы подсветка строки осуществлялась по времени?
Вставил на страницу часы:

Код:

<script type="text/javascript">
                function Norm(Arg) {
                    return(Arg < 10) ? "0" + Arg : Arg;
                }
                function digitalWatch() {
                    var date = new Date();
                    var hours = Norm(date.getHours());
                    var minutes = Norm(date.getMinutes());
                    var seconds = Norm(date.getSeconds());
                    document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                    setTimeout("digitalWatch()", 1000);
                }
</script>

Вывел время но как им воспользоваться не могу понять.

[Admin]

Уточните, что именно Вы имеете в виду?
В определенное время при клике по строчке она должна окрашиваться в определенный цвет, а в другое время в другой цвет? Или что-то другое?

[ukr109]

Например, с 9:00 до 10:00 меняется фон первой строки, потом второй (первая возвращается в исходный фон) и т.д. Как табло на вокзалах

---

Кликать не нужно. Нужно чтоб это работало автоматически. Это реально сделать с помощью js и css?

[Admin]

Вполне реально, только нужно больше информации.
Сколько разных цветов должно быть и сколько строчек в таблице? Или количество не фиксировано?

Или всего один цвет? Например, в 9:00 - только первая строчка синяя, в 10:00 - только вторая строчка синяя, и т.д.?

[ukr109]

9 строк. Только одним цветом выделение. Да, с 9 до 10 первая, с 10 до 11 вторая.....Я так понимаю что мой документ должен отличатья от вашего только click(function) нужно заменить связкой со временем и всё?

[Admin]

Код:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function Norm(Arg) { return(Arg < 10) ? "0" + Arg : Arg; }

function digitalWatch() {
    var date = new Date();
    var hours = Norm(date.getHours());
    var minutes = Norm(date.getMinutes());
    var seconds = Norm(date.getSeconds());

    $(".color_table tr:not(.first_tr)").removeClass("color1");
    var str_num = date.getSeconds()-9;
    if (str_num>=0 && str_num<9) $(".color_table tr:not(.first_tr)").eq(str_num).addClass("color1");
    document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
}
setInterval("digitalWatch()", 1000);
</script>

Для наглядности привязал смену цвета строк к секундам...

Чтобы работало по часам, замените в строчке:

Код:

var str_num = date.getSeconds()-9;

date.getSeconds() на date.getHours()

[ukr109]

Так? Если jquery.js файл привязываю с диска часы отображаются, а если ссылкой то нет. И цвет не меняется. Где моя ошибка?

Код:

<!DOCTYPE html>

<html>
        <head>
               <title>Timetable</title>
               <meta charset="utf-8">
            <script type="text/javascript" src="jquery.js"></script>

            <script type="text/javascript">
                function Norm(Arg) { return(Arg < 10) ? "0" + Arg : Arg; }

                function digitalWatch() {
                var date = new Date();
                var hours = Norm(date.getHours());
                var minutes = Norm(date.getMinutes());
                var seconds = Norm(date.getSeconds());

                $(".color_table tr:not(.first_tr)").removeClass("color1");
                var str_num = date.getSeconds()-9;
                if (str_num>=0 && str_num<9) $(".color_table tr:not(.first_tr)").eq(str_num).addClass("color1");
                document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                }
                setInterval("digitalWatch()", 1000);
                </script>
                <link rel="stylesheet" type="text/css" href="style.css">
                </head>
        <body onload="digitalWatch()">
            <p align="right" id="digital_watch" style="color: #f00; font-size: 120%; font-weight: bold;"></p>
            <table>
                <caption>Расписание</caption>
                <tr>
                        <th colspan="2"></th>
                        <th>1</th>    <th>1</th>    <th>1</th>    <th>1</th>
                        <th>1</th>    <th>1</th>    <th>1</th>    <th>1</th>
                        <th>1</th>    <th>1</th>    <th>1</th>    <th>1</th>
                        <th>1</th>    <th>1</th>
                    <tr>
                            <th class="day" rowspan="9">ПН</th>
                            <td>1</td>
                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                            <tr>
                                <td>2</td>
                                <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                <tr>
                                    <td>3</td>
                                    <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                    <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                    <tr>
                                        <td>4</td>
                                        <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                        <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                        <tr>
                                            <td>5</td>
                                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                            <tr>
                                                <td>6</td>
                                                <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                <tr>
                                                    <td>7</td>
                                                    <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                    <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                    <tr>
                                                        <td>8</td>
                                                        <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                        <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                        <tr>
                                                            <td>9</td>
                                                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                            <td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td><td>Урок</td>
                                                        </tr>
                                                    </tr>
                                                </tr>
                                            </tr>            
                                        </tr>
                                    </tr>

                                </tr>

                            </tr>

                        </tr>
                    </tr>
                </table>
        </body>
</html>

[Admin]

Добавьте таблице класс color_table, т.к. он прописан в скрипте чтобы скрипт работал только с указанной таблицей:

Код:

<table class="color_table">

Так же необходимо добавить CSS стиль color1, который будет содержать цвет для выделения строчки:

Код:

.color1 { background-color: #6666FF !important; }

JQuery сам всегда делаю ссылкой, т.к. не вижу смысла грузить данную библиотеку со своего сервера, да и с серверов гугла данная библиотека грузится быстрее.

Так же в строчке if (str_num>=0 && str_num<9) ... замените 9 на 10, т.к. я думал что будет 9 строк вместе с заголовком.

[ukr109]

Огромное спасибо. Переключение заработало. У меня эта схема работает с <th>, а с <td> то есть основной таблицей не хочет. А почему?
И ещё вопрос: Скрипт считывает время и сравнивает её с переменной:

var str_num = date.getSeconds()-9; //смещение на моё время 9:00
if (str_num>=0 && str_num<10) //кол строк.
$(".color_table tr:not(.first_tr)").eq(str_num).addClass("color1");

А как вставить "delay" или подобную функцию ожидания, чтобы изменить интервалы переключения строк на своё усмотрение. То есть таблица "стартует" в 9:00 (эта часть уже работает), через 50 мин 2-я строка, через 30 мин 3-я...