Подсветка ячеек HTML таблицы в зависимости от значения (jQuery)

Question

Есть таблица, которая заполянется в зависимости от выбранного элемента dropdown. Вот код (строку с элементами dropdown не вставлял):

<table id="myPlaneTable" class="table table-bordered">
    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">487</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">600</td>
    </tr>

    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">580</td>
        <td style="width: 15%">490</td>
        <td style="width: 15%">543</td>
        <td style="width: 15%">742</td>
    </tr>
</table

Вот как она выглядит

Так как я только начал изучать jQuery, попытался подставить следующий код, но он не работает

$("#myPlaneTable tbody tr.data-in-table").each(function () {
    $(this).find('td').each(function (index) {
        var currentCell = $(this);
        var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
        if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
            currentCell.css('backgroundColor', 'red');
            nextCell.css('backgroundColor', 'green');
        }
    });
});

Результат, который я пытаюсь получить

Подсветка только лучшего и худшего значения
Если в нескольких ячейках данные совпадают, необходимо их тоже подсветить
Если данные отсутствуют, ячейка должна быть без подсветки
Данные должны сравниватся в рамках одного <tr>, так как строк будет несколько

Answer 1

Ищем max-min в каждой row , выделяем max-min цветом

(function(){
  $("#myPlaneTable tr").each(function(){
    
    var val = $(this).find('td:gt(0)').map(function(){
      var int =$(this).text();
      $(this).addClass(int);
      return int;
    });
    
    var highest = Math.max.apply( Math, val );
    var lowest = Math.min.apply( Math, val );
    
    $(this).find('.'+highest).css('backgroundColor', 'green');
    $(this).find('.'+lowest).css('backgroundColor', 'red')
  });  
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myPlaneTable" class="table table-bordered">
    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">487</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">600</td>
    </tr>

    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">580</td>
        <td style="width: 15%">490</td>
        <td style="width: 15%">543</td>
        <td style="width: 15%">742</td>
    </tr>
</table>

БЛОГ НА HUSL

Подсветка ячеек HTML таблицы в зависимости от значения (jQuery)

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