JSFiddle - React, Tailwind, and code Playground

HTML

<label for="cb">hide blue</label>
	<input id="cb" type="checkbox" onchange="hideBlue(this.checked)" />
	
	<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

td {
    border:1px solid #555;width:200px;
}

tr:nth-child(odd) {
    background-color:#aaa;
}

.displaynone {
    display: none;
}

tr.displaynone ~ tr {
    background-color: transparent;
}

tr.displaynone ~ tr:nth-child(even) {
    background-color:#aaa;
}

tr {
    cursor: pointer;
}

JavaScript

function hideBlue(hide) {
    var cats = document.querySelectorAll('[data-cat="blue"]');
    for (var i = 0; i < cats.length; i++) {
        if (hide) {
            cats[i].setAttribute('class', 'displaynone')
            continue;
        }
        cats[i].removeAttribute('class');
    }
}