Форум

Alban · #1 (**permalink**) 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 · #2 (**permalink**) 24.02.2014, 15:47

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

kostyanet · #3 (**permalink**) 24.02.2014, 15:56

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

kostyanet · #4 (**permalink**) 24.02.2014, 15:57

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

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

Alban · #5 (**permalink**) 24.02.2014, 17:05

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

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

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

Alban · #6 (**permalink**) 24.02.2014, 17:06

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

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

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

Alban · #7 (**permalink**) 24.02.2014, 17:16

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

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

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

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

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

рони · #8 (**permalink**) 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 · #9 (**permalink**) 24.02.2014, 17:41

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

Alban · #10 (**permalink**) 24.02.2014, 17:46

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

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>

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

Форум

Справочник

Discord чат

Курсы javascript