JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <tr class="contentEditable">
        <td>
            Data
        </td>
        <td id='statusColumn'>
            Status
        </td>
        <td>
            Other Data
        </td>
    </tr>
    <tr class="contentEditable">
        <td>
            1
        </td>
        <td>
            Early
        </td>
        <td>
            Late
        </td>
    </tr>
    <tr class="contentEditable">
        <td>
            2
        </td>
        <td>
            Late
        </td>
        <td>
            Early
        </td>
    </tr>
</table>
<button onclick="color();">Color rows</button>

CSS

.contentEditable:hover, .contentEditable:focus {
    background: #D7D7FF;
}

JavaScript

color = function() {
    var table = document.getElementById('myTable');
    var trList = table.getElementsByTagName('tr');
    // index of the status column
    var index = -1;
    for (var i = 0; i < trList.length; i++) {
        var tdList = trList[i].getElementsByTagName('td');
        if (index < 0) {
            // we need to find out the status column index first
            for (var j = 0; j < tdList.length; j++) {
                if (tdList[j].id == 'statusColumn') {
                    index = j;
                    break;
                }
            }
        }
        if (tdList[index].innerHTML.trim() == 'Late') {
            // for constant coloring
            trList[i].style.background = '#FFD7D7';
            
            // for on hover coloring
//            trList[i].onmouseover = function() {
//                this.style.background = '#FFD7D7';
//            }
//            trList[i].onmouseout = function() {
//                this.style.background = '';
//            }
        }
    }
}