Как найти все td под th?

238
18 апреля 2022, 22:40
<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"]. Через такую штуку планирую закрашивать ячейку в красный.

Answer 1

Кратко отвечая на вопрос "как по нужному <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 в рамках поставленного вопроса, демонстрация

READ ALSO
JS Как менять активный элемент коллекции?

JS Как менять активный элемент коллекции?

Пытаюсь переписать код с jQuery на ванильный JSПри клике на элемент коллекции должен добавляться класс 'active', а при клике на другой элемент класс...

140
Объединить массивы и вывести в HTML

Объединить массивы и вывести в HTML

есть 2 массива с переменными, нужно их объединить, создать из них элементы button с классом btn-menu, data элементом category (с переменной из массива) и текстом...

150
Помогите преобразовать PHP в JS или jQuery [закрыт]

Помогите преобразовать PHP в JS или jQuery [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

154
обход скриптом всех селекторов [закрыт]

обход скриптом всех селекторов [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

165