JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" cellpadding="4" cellspacing="4">
<tr class="alt">
    <td class="status"><input type="text" value="One"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="Zero"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="Zero"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="One"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"><input type="text" value="Zero"></td>
    <td>Received</td>
</tr>
</table>

CSS

td
{
    padding:10px;
}

tr.odd
{
    background-color:#fcfceb;
}

tr.even
{
    background-color:#f0f8ff;
}

tr.odd.zero
{
    background-color:#ff0000;
}
tr.even.zero
{
    background-color:#cc0000;
}

JavaScript

$(document).ready(function(){
    
    $("tr.alt:even").addClass("even");
    $("tr.alt:odd").addClass("odd");
    $('td.status input').bind('change keyup', function(){
        var tr=$(this).closest('tr');
        
        if ($(this).val()=='Zero') tr.addClass('zero');       
        else tr.removeClass('zero');
             
    }).trigger('change'); // the trigger is to run this action on load
});