<table>
<tr>
<th class="monday">Понедельник</th>
<th class="tuesday">Вторник</th>
<th class="wednesday">Среда</th>
</tr>
<tr>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
</tr>
<tr>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
</tr>
</table>
Делаю календарь(с разбивкой по неделям). С возможностью выбрать время и закрасить его.
Столкнулся с тем что не понимаю как по нужному <th>
классу(не id
) находить все входящие в него <td>
.
Как это можно сделать?
Скажем будет у меня переменная blockedTimes
которая содержит в себе заблокированные часы в опред. день ["wednesday", "10:00"]
. Через такую штуку планирую закрашивать ячейку в красный.
Кратко отвечая на вопрос "как по нужному <th>
классу(не id) находить все входящие в него <td>
" - с помощью table td:nth-child(N)
Исходя из задачи, рассмотрим код:
function draw() {
// предположу, что данные по дням статичны, всегда возвращается monday, tuesday, wendsday, thursday, friday, saturday, sunday
let blocked = [
['9:00', '10:00'], // понедельник
['9:00'], // вторник
['10:00'], // среда
[], // четверг
[], // пятница
['10:00'], // суббота
[] // воскресенье
];
let tds = document.querySelectorAll("table td")
tds.forEach(element => {
if (blocked[element.cellIndex].includes(element.innerText)) {
element.setAttribute("style", "background-color: red;")
}
})
}
draw()
<table>
<tr>
<th class="monday">Понедельник</th>
<th class="tuesday">Вторник</th>
<th class="wednesday">Среда</th>
<th class="thursday">Четверг</th>
<th class="friday">Пятница</th>
<th class="saturday">Суббота</th>
<th class="sunday">Воскресенье</th>
</tr>
<tr>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
</tr>
<tr>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
</tr>
</table>
Переменная blocked
- массив, соответствующий дням и заблокированному времени (окрашиваемому) для дня, в примере: для понедельника заблокированы 9:00 и 10:00, для субботы - 10:00, а для четверга и пятницы нет заблокированного времени
Соответствия для массива находим с помощью cellIndex
, element.innerText
отвечает за то, что содержится в td
(предполагается, что время в виде 9:00, 10:00 и тд, соответствующему формату данных в массиве blocked
)
Примеры, которые я привел, можно улучшить в плане чистоты кода, но они наглядно демонстрируют работу с DOM
в рамках поставленного вопроса, демонстрация
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Пытаюсь переписать код с jQuery на ванильный JSПри клике на элемент коллекции должен добавляться класс 'active', а при клике на другой элемент класс...
есть 2 массива с переменными, нужно их объединить, создать из них элементы button с классом btn-menu, data элементом category (с переменной из массива) и текстом...
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение