Как сравнить данные в таблице и выделить цветом?

Question

[xqesc]

Создал таблицу, распределил данные. Но не могу найти или создать скрипт для сравнения данных и выделения цветом.
Нужно сравнивать числа в таблице в контейнере "danie". И цвет меньшего числа менять на зелёный.

<div class="table-price">
  <table>
    <tr>
      <td class="logo-table">
        Общиий анализ крови+ </br>СОЭ с лейкоцитарной формулой
      </td>
      <div class="danie">
        <td>720&#8381</td>
        <td>750&#8381</td>
        <td>720&#8381</td>
        <td>710&#8381</td>
        <td>720&#8381</td>
        <td>750&#8381</td>
      </div>
    </tr>
    <tr>
      <td class="logo-table">
        Общий анализ мочи
      </td>
      <div class="danie">
        <td>720&#8381</td>
        <td>750&#8381</td>
        <td>720&#8381</td>
        <td>710&#8381</td>
        <td>720&#8381</td>
        <td>750&#8381</td>
      </div>
    </tr>
    <tr>
      <td class="logo-table">
        Глюкоза
      </td>
      <div class="danie">
        <td>720&#8381</td>
        <td>750&#8381</td>
        <td>720&#8381</td>
        <td>710&#8381</td>
        <td>720&#8381</td>
        <td>750&#8381</td>
      </div>
    </tr>
  </table>
</div>

Comments

[0xD34F]

Создал таблицу

Это не таблица, а мусор. У вас div вложен в tr. Так быть не должно. Переделывайте.

[Cr2ed]

как вы получаете эти данные? я бы предложил разложить это в двумерный массив объектов аля:

{
    value: '720'
    currency: '&#8381'
    colour: 'black'
}

Далее идем построчно, выделяем все value через функцию map массива, находим минимальное значение (Math.min(...array)), после чего у всех элементов в строке у кого value === min меняем цвет на нужный вам.

Так же присоединяюсь к комментарию выше: структура таблицы неправильная.

Answer 1

[0xD34F]

Для выделения используем класс:

.highlight {
  color: green;
}

Элемент с минимальным значением можно найти отсортировав все и взяв нулевой:

document.querySelectorAll('.table-price tr').forEach(n => {
  const td = Array
    .from(n.querySelectorAll('td:not(.logo-table)'))
    .sort((a, b) => parseInt(a.innerText) - parseInt(b.innerText))
    .shift();

  td.classList.add('highlight');
});

Или последовательно перебирая элементы и делая на каждом шаге выбор между текущим и минимальным из уже просмотренных:

document.querySelectorAll('.table-price tr').forEach(n => {
  const td = Array
    .from(n.cells)
    .slice(1)
    .reduce((min, n) => parseInt(min.innerText) < parseInt(n.innerText) ? min : n);

  td.classList.add('highlight');
});

Демо. Представлены оба варианта, второй с небольшим изменением - ищется максимальный.