0

Имею таблицу расписания игр. Нужно подсветить всю строку со временем и результатом. Пока подсвечивается только ячейка. Надо что-то добавить в синтаксисе стрелочной функции

// Слово для поиска
let word = 'Зубило'.toLowerCase();

// Перебираем все строки
Array.from(document.querySelectorAll('span.teams')).forEach(e => 
  // Если в строке есть заданное слово - добавляем класс строке
  e.innerHTML.toLowerCase().includes(word) ? e.classList.add('highlight') : null
);
.highlight {
    background-color: #f6ceab;
}
<div class="event">
<span class="time">18:00</span>
<span class="teams">Спартак – Динамо</span>
<span class="result-left">2</span>:
<span class="result-right">1</span>
</div>

<div class="event">
<span class="time">19:00</span>
<span class="teams">Зубило – Метеор</span>
<span class="result-left">1</span>:
<span class="result-right">1</span>
</div>

<div class="event">
<span class="time">20:00</span>
<span class="teams">Вымпел – Зоркий</span>
<span class="result-left">1</span>:
<span class="result-right">3</span>
</div>

1 ответ 1

0

Для получения родительского элемента можно воспользоваться методами: parentNode, parentElement.

Например:

// Слово для поиска
let word = 'Зубило'.toLowerCase();

// Перебираем все строки
Array.from(document.querySelectorAll('span.teams')).forEach(el => {
  // Если в строке есть заданное слово - добавляем класс строке
  if (el.innerHTML.toLowerCase().includes(word)) {
    el.parentNode.classList.add('highlight');
  }
});
.highlight {
  background-color: #f6ceab;
}
<div class="event">
  <span class="time">18:00</span>
  <span class="teams">Спартак – Динамо</span>
  <span class="result-left">2</span>:
  <span class="result-right">1</span>
</div>

<div class="event">
  <span class="time">19:00</span>
  <span class="teams">Зубило – Метеор</span>
  <span class="result-left">1</span>:
  <span class="result-right">1</span>
</div>

<div class="event">
  <span class="time">20:00</span>
  <span class="teams">Вымпел – Зоркий</span>
  <span class="result-left">1</span>:
  <span class="result-right">3</span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.