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>

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


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