JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr data-cat="red">
        <td>red car</td>
    </tr>
    <tr data-cat="blue">
        <td>blue jacket</td>
    </tr>
    <tr data-cat="red">
        <td>red bull</td>
    </tr>
    <tr data-cat="red">
        <td>red pen</td>
    </tr>
</table>

CSS

tr[data-cat=blue] {
    display: none;
}
.red {
    background-color:#aaa;
}

JavaScript

function loopTable() {
    var x=0;
    $("table>tbody>tr").each(function() {
        if( $(this).is(":visible")  ) {
            if( x%2==0 )
                $(this).addClass('red');
            else
                                $(this).removeClass('red');
            x++;     
        }        
    });
}

$(document).ready(function() {
    loopTable();
});