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

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]

О какой таблице идёт речь:

const table = document.querySelector('.table-price table');

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

.highlight-min {
  color: green;
  font-weight: bold;
}

.highlight-max {
  color: red;
  font-weight: bold;
}

Находим минимум:

table.querySelectorAll('tr').forEach(n => {
  const td = Array
    .from(n.querySelectorAll('td:not(.logo-table)'), m => [ m, +m.innerText.match(/\d+/) ])
    .sort((a, b) => a[1] - b[1])[0][0];

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

Но что если искомое значение представлено в нескольких экземплярах? Выделяем все максимумы:

for (const { cells: [ , ...cells ] } of table.rows) {
  const [ tds ] = cells.reduce((max, n) => {
    const val = parseInt(n.textContent);
    if (val > max[1]) {
      max = [ [], val ];
    }
    if (val === max[1]) {
      max[0].push(n);
    }
    return max;
  }, [ [], -Infinity ]);

  tds.forEach(n => n.classList.add('highlight-max'));
}

https://jsfiddle.net/72msenta/