JSFiddle - React, Tailwind, and code Playground

by hamiltonlima

HTML

<table border="1" id="source">
    <tr>
        <th>Day</th>
        <th>Time</th>
        <th>A</th>
        <th>B</th>
    </tr>
    <tr id="1">
        <td>Monday</td>
        <td>0:00 - 8:00</td>
        <td class="data">100</td>
        <td class="data">120</td>
    </tr>
    <tr id="2">
        <td></td>
        <td>8:00 - 18:00</td>
        <td class="data">90</td>
        <td class="data">100</td>
    </tr>
    <tr id="3">
        <td></td>
        <td>18:00 - 0:00</td>
        <td class="data">80</td>
        <td class="data">60</td>
    </tr>
    <tr>
        <th>Day</th>
        <th>Time</th>
        <th>A</th>
        <th>B</th>
    </tr>
    <tr id="4">
        <td>Tuesday</td>
        <td>0:00 - 8:00</td>
        <td class="data">100</td>
        <td class="data">120</td>
    </tr>
    <tr id="5">
        <td></td>
        <td>8:00 - 18:00</td>
        <td class="data">90</td>
        <td class="data">100</td>
    </tr>
    <tr id="6">
        <td></td>
        <td>18:00 - 0:00</td>
        <td class="data">80</td>
        <td class="data">60</td>
    </tr>
</table>

JavaScript

var result = new Array();

// calculate 
$('#source tr').each(function () {
    var id = $(this).attr('id');
    result[id] = new Array();
    result[id]['bigger'] = -1;
    result[id]['smaller'] = 99999999;

    $(this).find('td').each(function () {
        console.debug("id = " + id);
        if ($(this).attr('class') === 'data') {
            var n = Number($(this).text());

            if (n > result[id]['bigger']) {
                result[id]['bigger'] = n;
            }

            if (n < result[id]['smaller']) {
                result[id]['smaller'] = n;
            }
        }

    })
});


// add some colors
// calculate 
$('#source tr').each(function () {
    var id = $(this).attr('id');

    $(this).find('td').each(function () {

        if ($(this).attr('class') === 'data') {
            var n = Number($(this).text());

            if (n == result[id]['bigger']) {
                $(this).css("background", "#CC0000");
            }

            if (n == result[id]['smaller']) {
                $(this).css("background", "#00CC00");
            }
        }

    })
});