Подскажите с JS добавление классов к родительским элементам

Question

Вот есть у меня такая наработка кода, всё работает, но мне нужно чтобы я добавил класс не к span тегу, а к строкам tr в которых был найден данный текст.

Вот как бы так сделать, чтобы добавить класс к tr.part содержащие символы "-08-" в span тегах?

У меня есть одна идея, как это можно реальзовать через кучу условий "if", сделать что-то вроде такой же проверки на символы "-08-" в строке "tr", но так как в строке предпологается не одна ячейка "td", которые так же могут содержать эти символы, а так же возможен различный объем текста в другх ячейках td тогда уже не получится так просто применить метод slice...

Вот поэтому возможно как-то из этого кода, что я прилагаю можно сделать проверку tr.part на наличие в теге span.span-style символов "-08-", и если они там найдены, нужно добавить класс "hide" строкам tr.part; и ещё причина по которой я задаю позицию этих символ, это потому что они являются как бы целой строкой, вот пример записи в теге span.span-style : "2021-08-15".

let selectorPart = document.querySelectorAll('tr.part');
console.log(selectorPart);
let selectorAll = document.querySelectorAll('tr.part>td>span.span-style'); // выбрали все селекторы тега span класса "span-style"
console.log(selectorAll);
let myArray = Array.from(selectorAll);
console.log(myArray);
// Через фильтр задаём позицию и находим строки содержащие "-08-"
let filterAug = myArray.filter(function (item, index, array) {
    return item.innerText.slice(4, 8) == "-08-";
});
// Перебераем найденные элементы массива и с помощью функции даём класс каждому элементу
filterAug.forEach(hide);
function hide(item) {
item.classList.add('hide');
console.log(item);


<!-- Пример HTML разметки --!>
    <table>
    <tr class="part">
     <td> Словак, 15 т </td>
     <td><span class="span-style">2021-08-14</span> 
     Зол. №15
     </td>
     <td><span class="span-style">2021-09-06</span> 
     Зол. №12
     </td>
     <td><span class="span-style">2021-09-14</span> 
     Зол. №21
     </td>
     <td><span class="span-style">2021-09-20</span> 
     Зол. №33
     </td>
    </tr>
    <tr class="part">
     <td> Ловаш, 5 т </td>
     <td><span class="span-style">2021-07-14</span> 
      Зол. №15
     </td>
     <td><span class="span-style">2021-08-06</span> 
     Зол. №12
     </td>
     <td><span class="span-style">2021-09-14</span> 
     Зол. №21
     </td>
     <td><span class="span-style">2021-09-20</span> 
     Зол. №33
     </td>
    </tr>
   <tr class="part">
     <td> Ловаш, 5 т </td>
     <td><span class="span-style">2021-07-14</span> 
      Зол. №15
     </td>
     <td><span class="span-style">2021-09-06</span> 
     Зол. №12
     </td>
     <td><span class="span-style">2021-09-14</span> 
     Зол. №21
     </td>
     <td><span class="span-style">2021-09-20</span> 
     Зол. №33
     </td>
    </tr>
    </table>

Answer 1

let tr = document.querySelectorAll('tr')

tr.forEach(el=>{
  let str = el.innerHTML
  el.closest('tr').classList.remove('hide');
  if (/-08-/i.test(str)) el.closest('tr').classList.add('hide')
})

В виде функции:

function hideRow(text){
    let tr = document.querySelectorAll('tr');

  tr.forEach(el=>{
    el.closest('tr').classList.remove('hide');
    const str = el.innerHTML;
    const reg = new RegExp(text, 'i');
    if (reg.test(str)) el.closest('tr').classList.add('hide');
  })
}

hideRow('-08-');

БЛОГ НА HUSL

Подскажите с JS добавление классов к родительским элементам

Ответы (1 шт):