Javascript-форум - Изменение фона столбца в зависимости от дня недели

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Изменение фона столбца в зависимости от дня недели (https://javascript.ru/forum/dom-window/45335-izmenenie-fona-stolbca-v-zavisimosti-ot-dnya-nedeli.html)

Alban

24.02.2014 15:44

Изменение фона столбца в зависимости от дня недели

Имеется код:

<html>
<head>
<style type="text/css">
.bgr {
    background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<table cols="7">
    <tr bgcolor="#EEf0F5" align="center">
        <td id="PN">ПН</td>
        <td id="VT">ВТ</td>
        <td id="SR">CР</td>
        <td id="CH">ЧТ</td>
        <td id="PT">ПТ</td>
        <td id="SB">СБ</td>
        <td id="VS">ВС</td>
    </tr>
    <tr align="center">
        <td id="PN">9<sup>00</sup></td>
        <td id="VT">9<sup>00</sup></td>
        <td id="SR">9<sup>00</sup></td>
        <td id="CH">9<sup>00</sup></td>
        <td id="PT">9<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
    <tr align="center">
        <td id="PN">18<sup>00</sup></td>
        <td id="VT">18<sup>00</sup></td>
        <td id="SR">18<sup>00</sup></td>
        <td id="CH">18<sup>00</sup></td>
        <td id="PT">18<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
</table>
</body>
</html>

Подскажите, как можно реализовать скрипт, чтобы в зависимости от дня недели применялся стиль .bgr к определённому id, т.е., если сегодня понедельник, то .bgr применяется к группе с id = PN, или может есть иные варианты?

animhotep

24.02.2014 15:47

берёте номер дня (new Date()).getDay() и функцией className меняете классы нужным строкам

kostyanet

24.02.2014 15:56

Не может быть три id="ПН". То есть может, но смысла не может быть.

kostyanet

24.02.2014 15:57

А вот цвет к col применяется

http://www.w3schools.com/tags/tag_colgroup.asp

Alban

24.02.2014 17:05

Цитата:

Сообщение от animhotep (Сообщение 299201)

берёте номер дня (new Date()).getDay() и функцией className меняете классы нужным строкам

Хорошо, как в виде скрипта реализовать?

Alban

24.02.2014 17:06

Цитата:

Сообщение от kostyanet (Сообщение 299203)

Не может быть три id="ПН". То есть может, но смысла не может быть.

А className=PN три раза возможно?

Alban

24.02.2014 17:16

Цитата:

Сообщение от kostyanet (Сообщение 299204)

А вот цвет к col применяется

http://www.w3schools.com/tags/tag_colgroup.asp

<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>

Colgroup задаёт форматирование для каждого столбца, в моём случае он не поможет, т.к. фон должен меняться в зависимости от дня недели, а не оставаться статичным. Пример:

рони	24.02.2014 17:38

Alban,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
    var day = (new Date).getDay()||7;
	document.write(
		'<style>',
		'td:nth-of-type('+day+') { background-color: red;}',
		'</style>'
	)
</script>

</head>
<body>
<table cols="7">
    <tr bgcolor="#EEf0F5" align="center">
        <td id="PN">ПН</td>
        <td id="VT">ВТ</td>
        <td id="SR">CР</td>
        <td id="CH">ЧТ</td>
        <td id="PT">ПТ</td>
        <td id="SB">СБ</td>
        <td id="VS">ВС</td>
    </tr>
    <tr align="center">
        <td id="PN">9<sup>00</sup></td>
        <td id="VT">9<sup>00</sup></td>
        <td id="SR">9<sup>00</sup></td>
        <td id="CH">9<sup>00</sup></td>
        <td id="PT">9<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
    <tr align="center">
        <td id="PN">18<sup>00</sup></td>
        <td id="VT">18<sup>00</sup></td>
        <td id="SR">18<sup>00</sup></td>
        <td id="CH">18<sup>00</sup></td>
        <td id="PT">18<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
</table>
</body>
</html>

animhotep

24.02.2014 17:41

интересное решение)

Alban

24.02.2014 17:46

Цитата:

Сообщение от рони (Сообщение 299239)

Alban,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
    var day = (new Date).getDay()||7;
	document.write(
		'<style>',
		'td:nth-of-type('+day+') { background-color: red;}',
		'</style>'
	)
</script>

</head>
<body>
<table cols="7">
    <tr bgcolor="#EEf0F5" align="center">
        <td id="PN">ПН</td>
        <td id="VT">ВТ</td>
        <td id="SR">CР</td>
        <td id="CH">ЧТ</td>
        <td id="PT">ПТ</td>
        <td id="SB">СБ</td>
        <td id="VS">ВС</td>
    </tr>
    <tr align="center">
        <td id="PN">9<sup>00</sup></td>
        <td id="VT">9<sup>00</sup></td>
        <td id="SR">9<sup>00</sup></td>
        <td id="CH">9<sup>00</sup></td>
        <td id="PT">9<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
    <tr align="center">
        <td id="PN">18<sup>00</sup></td>
        <td id="VT">18<sup>00</sup></td>
        <td id="SR">18<sup>00</sup></td>
        <td id="CH">18<sup>00</sup></td>
        <td id="PT">18<sup>00</sup></td>
        <td id="SB"></td>
        <td id="VS"></td>
    </tr>
</table>
</body>
</html>

Отлично! Расшифровку (объяснение) скрипта дать можете?

animhotep

24.02.2014 17:47

обеих строк кода?)))

рони	24.02.2014 17:49

Цитата:

Сообщение от Alban

Расшифровку (объяснение) скрипта дать можете?

немогу в скрипте либо всё ясно и так http://javascript.ru/Date/getDay либо надо изучать хотябы css http://htmlbook.ru/css/nth-of-type

Alban

24.02.2014 19:18

Цитата:

Сообщение от рони (Сообщение 299245)

немогу в скрипте либо всё ясно и так http://javascript.ru/Date/getDay либо надо изучать хотябы css http://htmlbook.ru/css/nth-of-type

Спасибо за помощь!

Alban

24.02.2014 20:45

Конечный вариант:

<!DOCTYPE HTML>
<html>
<head>
<!--<meta charset="utf-8"> -->
<style>
table { /* table-layout: fixed Ячейки фиксированной ширины */
}
td{
width:30px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
tr.col1
{
font-weight: bold;
}

</style>
<script>
    var day = (new Date).getDay()||7;
    document.write(
        '<style>',
        'td:nth-of-type('+day+') {background: #079EBB;color: white;}',
        '</style>'

    )
</script>
 
</head>
<body>
<table cols="7" cellspacing="0">
    <tr class="col1" cellspacing="1" bgcolor="#EEf0F5" align="center">
        <td>ПН</td>
        <td>ВТ</td>
        <td>CР</td>
        <td>ЧТ</td>
        <td>ПТ</td>
        <td>СБ</td>
        <td>ВС</td>
    </tr>
    <tr align="center">
        <td>9<sup>00</sup></td>
        <td>9<sup>00</sup></td>
        <td>9<sup>00</sup></td>
        <td>9<sup>00</sup></td>
        <td>9<sup>00</sup></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
        <td>18<sup>00</sup></td>
        <td>18<sup>00</sup></td>
        <td>18<sup>00</sup></td>
        <td>18<sup>00</sup></td>
        <td>18<sup>00</sup></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

kostyanet

26.02.2014 07:27

Цитата:

Сообщение от Alban

Col может нести атрибут id? Значит 7 колов с id="PN", id="VT" и тп. js определяет день недели в синтаксисе этих идех и делает так

var day_name = get_current_week_day_name();
col.class='week_'+day_name;

Или типа того.

kostyanet

26.02.2014 07:58

Вот такие колы

<colgroup>
<col id="day1">
<col id="day2">
<col id="day3">
<col id="day4">
<col id="day5">
<col id="day6">
<col id="day7">
</colgroup>

вот такая функция

document.getElementById("day"+new Date().getDay()).style.backgroundColor="red";

Кал в том что кол почти ничего не понимает, зомби, внатури. Фон задать можно, цвет - нельзя.

рони	26.02.2014 09:46

kostyanet,
либо неточна функция либо 8 строка

Alban

26.02.2014 10:54

Цитата:

Сообщение от kostyanet (Сообщение 299568)

Вот такие колы

<colgroup>
<col id="day1">
<col id="day2">
<col id="day3">
<col id="day4">
<col id="day5">
<col id="day6">
<col id="day7">
</colgroup>

вот такая функция

document.getElementById("day"+new Date().getDay()).style.backgroundColor="red";

Кал в том что кол почти ничего не понимает, зомби, внатури. Фон задать можно, цвет - нельзя.

от чего так, почему не понимает?

kostyanet

27.02.2014 05:01

Цитата:

Сообщение от рони

либо неточна функция либо 8 строка

Щито?

Цитата:

Сообщение от Alban

от чего так, почему не понимает?

У браузерописателей надо спросить.

background-color: red - понимает
color:red - не понимает

рони	27.02.2014 09:37

kostyanet,
В воскресенье ваш код несработает!

Alban

27.02.2014 19:52

Цитата:

Сообщение от kostyanet (Сообщение 299751)

Щито?

У браузерописателей надо спросить.

background-color: red - понимает
color:red - не понимает

понятно

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