Подсветка столбца <td>в зависимости от значения и строки. Изменить существующий jQuery скрипт

Question

Таблица, которая будет заполняться в зависимости от выбранного выпадающего элемента. Есть код HTML (я не вставил строку с выпадающим списком и изображением)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="PlaneTable" 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>
  <tr>
    <td style="width: 20%">Climb</td>
    <td style="width: 15%">52</td>
    <td style="width: 15%">34</td>
    <td style="width: 15%">23</td>
    <td style="width: 15%">43</td>
  </tr>
</table 

<!-- And script what set green color to best value and red color to worse -->

<script>
  $("#PlaneTable tbody tr").each(function() {
    var values = [];
    var tds = $(this).find('td');
    tds.each(function() {
      if ($.isNumeric($(this).text())) {
        values.push($(this).text());
      }
    });
    var min = Math.min.apply(Math, values);
    var max = Math.max.apply(Math,
      values);
    tds.each(function() {
      if ($(this).text() == min) {
        $(this).css('backgroundColor', 'red');
      }
      if ($(this).text() == max) {
        $(this).css('backgroundColor', 'green');
      }
    });
  });
</script>

Наконец-то у меня есть

Мне нужно изменить свой сценарий для следующих требований:

1. Некоторые данные, например, строка «Подъем» лучше, если она имеет меньшее значение. ИМХО лучше применять скрипт к строке, а не к таблице. Кроме того, некоторые строки не должны выделяться.
2. Если я добавлю метку «км / ч». Например, подсветка 450 км / ч не работает. Необходимо исправить
3. Если <td> имеет конкретное значение "null" (int nullable type), оно не должно быть выделено в любое время

Answer 1

Рассмотрим следующее.

$(function() {
  function getNum(s) {
    var n = false;
    if (s.length) {
      n = parseInt(s, 10);
    }
    return n;
  }

  function getRowData(t) {
    var r = [],
      n;
    $("td", t).each(function(i, el) {
      n = getNum($(el).text());
      if (i > 0 && n) {
        r.push(n);
      }
    });
    return r;
  }

  $("#PlaneTable tbody tr").each(function(ind, row) {
    var values = getRowData($(row));
    var min = Math.min.apply(Math, values);
    var max = Math.max.apply(Math, values);
    console.log(values, min, max);
    if ($("td", row).eq(0).text() == "Climb") {
      $(row).addClass("low");
    } else {
      $(row).addClass("high");
    }
    $("td", row).each(function(j, cell) {
      if ($(cell).text().indexOf(min) == 0 && $(".min", row).length < 1) {
        $(this).addClass("min");
      }
      if ($(cell).text().indexOf(max) == 0 && $(".max", row).length < 1) {
        $(cell).addClass("max");
      }
    });
  });
});

.high .min {
  background-color: red;
}

.high .max {
  background-color: green;
}

.low .min {
  background-color: green;
}

.low .max {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="PlaneTable" class="table table-bordered">
  <tr>
    <td style="width: 20%">Max speed</td>
    <td style="width: 15%">450 km/h</td>
    <td style="width: 15%">487 km/h</td>
    <td style="width: 15%">450 km/h</td>
    <td style="width: 15%">600 km/h</td>
  </tr>
  <tr>
    <td style="width: 20%">Max speed</td>
    <td style="width: 15%">580 km/h</td>
    <td style="width: 15%">490 km/h</td>
    <td style="width: 15%">543 km/h</td>
    <td style="width: 15%">742 km/h</td>
  </tr>
  <tr>
    <td style="width: 20%">Climb</td>
    <td style="width: 15%">52 km/h</td>
    <td style="width: 15%">34 km/h</td>
    <td style="width: 15%">23 km/h</td>
    <td style="width: 15%"></td>
  </tr>
</table>

Ссылки:

• https://www.w3schools.com/jsref/jsref_indexof.asp
• https://www.w3schools.com/jsref/jsref_parseint.asp
• https://api.jquery.com/each/