Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2014, 15:44
Аватар для Alban
Интересующийся
Отправить личное сообщение для Alban Посмотреть профиль Найти все сообщения от Alban
 
Регистрация: 24.02.2014
Сообщений: 20

Изменение фона столбца в зависимости от дня недели
Имеется код:
<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, или может есть иные варианты?
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2014, 15:47
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

берёте номер дня (new Date()).getDay() и функцией className меняете классы нужным строкам
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2014, 15:56
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Не может быть три id="ПН". То есть может, но смысла не может быть.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2014, 15:57
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

http://www.w3schools.com/tags/tag_colgroup.asp
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2014, 17:05
Аватар для Alban
Интересующийся
Отправить личное сообщение для Alban Посмотреть профиль Найти все сообщения от Alban
 
Регистрация: 24.02.2014
Сообщений: 20

Сообщение от animhotep Посмотреть сообщение
берёте номер дня (new Date()).getDay() и функцией className меняете классы нужным строкам
Хорошо, как в виде скрипта реализовать?
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2014, 17:06
Аватар для Alban
Интересующийся
Отправить личное сообщение для Alban Посмотреть профиль Найти все сообщения от Alban
 
Регистрация: 24.02.2014
Сообщений: 20

Сообщение от kostyanet Посмотреть сообщение
Не может быть три id="ПН". То есть может, но смысла не может быть.
А className=PN три раза возможно?
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2014, 17:16
Аватар для Alban
Интересующийся
Отправить личное сообщение для Alban Посмотреть профиль Найти все сообщения от Alban
 
Регистрация: 24.02.2014
Сообщений: 20

Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #9 (permalink)  
Старый 24.02.2014, 17:41
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

интересное решение)
Ответить с цитированием
  #10 (permalink)  
Старый 24.02.2014, 17:46
Аватар для Alban
Интересующийся
Отправить личное сообщение для Alban Посмотреть профиль Найти все сообщения от Alban
 
Регистрация: 24.02.2014
Сообщений: 20

Сообщение от рони Посмотреть сообщение
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>
Отлично! Расшифровку (объяснение) скрипта дать можете?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение определенного класа в зависимости от другого wkornilow Events/DOM/Window 9 25.11.2013 18:48
определение дня недели по дате xber9 jQuery 1 29.10.2013 19:44
Динамическое изменение фона ячейки CyMKuH Элементы интерфейса 2 11.07.2011 15:19
смена CSSна сайте в зависимости от дня недели dac_60 Элементы интерфейса 29 12.12.2010 15:05
обновление в зависимости от дня недели Empty2112 Общие вопросы Javascript 13 16.09.2010 16:24