Highlighting HTML table cells depending on value (jQuery)

Question

There is a table that will populate depending on the selected dropdown element. Here is the code (I didn't insert a line with dropdown elements):

<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

Here's what it looks like

Since I was just starting to learn jQuery, I tried the following code, but it does not work

$("#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');
        }
    });
});

The result I'm trying to get

1. Highlighting if only the best and worst value (not between)
2. If the data matches in several cells, it is necessary to highlight them too
3. If there is no data, the cell should be without highlighting
4. Data should be compared within one <tr> , since there will be several lines

Answer 1

you have to loop through all Table Rows and Table cells, throw them together in an array and compare the numbers then for the lowest and highest.

I will give you 2 Solutions for the styling, first one (better choice) via seperate css file styling, second one via inline jQuery Styling.

Here is an working example how it can be solved: https://jsfiddle.net/efmkr08t/1/

$('#myPlaneTable').find('tr').not(':first').each(function(index, tr) {
        var cols = [];
    $(tr).find('td').not(':first').each(function(index, td) {
            if ($(td).text() === '') {
                return;
            }
            cols[index] = Number($(td).text());
    });
    var max = Math.max.apply(null, cols);
    var min = Math.min.apply(null, cols);

    $(tr).find('td').not(':first').each(function(index, td) {
            if (Number($(td).text()) === min) {
            // the way you should use it (styling is via css)   
               $(td).addClass('min')

            // inline css
            // $(td).css('background', 'red');
        }

        if (Number($(td).text()) === max) {
            // the way you should use it (styling is via css)   
              $(td).addClass('max')

            // inline css
            // $(td).css('background', 'green');
        }
    });
});

Answer 2

You can store all the values of each row in an array.
Then, store the minimum and maximum values, and finally apply the color to each <td> if the value match.

$("#myPlaneTable 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');
      }
    });

});

Answer 3

Here I'm using jQuery map and toggleClass()

 $(function(){ $('#myPlaneTable tr').each(function(index, tr) { max = Math.max.apply(Math,$('td:not(:first)', tr).map(function(index, td) { return parseInt($(td).text()); })); min = Math.min.apply(Math,$('td:not(:first)', tr).map(function(index, td) { return parseInt($(td).text()); })); $(this).find('td').each( function(){ $(this).toggleClass('best',parseInt($(this).text())==max).toggleClass('worst', parseInt($(this).text())==min) }); }); });

 .best{ background-color:green; } .worst{ background-color: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>