0

Есть таблица, которая заполянется в зависимости от выбранного элемента 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');
        }
    });
});

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

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

1 ответ 1

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>

4
  • Не учли пустые ячейки.
    – Deonis
    10 мар 2020 в 23:41
  • Использовал исходную таблицу
    – Redr01d
    10 мар 2020 в 23:46
  • Кроме таблицы, там есть еще и четыре условия. Как минимум, добавьте фильтрацию - .map(/* ... */).filter((i, v) => v.trim() !== '');
    – Deonis
    10 мар 2020 в 23:54
  • спс! думаю автор учтет ваш уместный коммент
    – Redr01d
    12 мар 2020 в 19:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.