Поиск по таблице и изменение класса в зависимости от содержимого ячейки

Question

Есть таблица

<table width="100%" border="1">
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Нет</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Нет</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
</table>

Нужно поменять class"oprosresult" в зависимости от значения ячейки. то есть если в ячейке записано "Да", то нужно присвоить этой ячейке class"oprosresult-yes", а если в ячейке "нет", то - class"oprosresult-no"

Я в JS не силен.

Если логически, то понимаю, что нужно получить данные ячеек. Проверить их. И записать в переменную. А потом эту переменную подставлять вместо class"oprosresult".

Вот есть пример как получить значение одной ячейки. А вот как все - не знаю. Да и как потом поменять класс тоже не знаю.

<div class="value">f</div>
 <script>
var tar = document.querySelector('.oprosresult')
var val = document.querySelector('.value')
val.innerHTML = tar.innerHTML
 </script>

Answer 1

for (const td of document.querySelectorAll('td.oprosresult')) {
  td.classList.remove('oprosresult');
  td.classList.add(`oprosresult-${td.textContent === 'Да' ? 'yes' : 'no'}`);
}

.oprosresult-yes {background: green;}
.oprosresult-no {background: red;}

<table width="100%" border="1">
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Нет</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Нет</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td class="oprosresult">Да</td>
  </tr>
</table>

БЛОГ НА HUSL

Поиск по таблице и изменение класса в зависимости от содержимого ячейки

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