JSFiddle - React, Tailwind, and code Playground
HTML
<table id="coolTable">
<tr>
<td class="anotherColumn">True</td>
<td class="firstName">Chris</td>
</tr>
<tr>
<td class="anotherColumn">True</td>
<td class="firstName">Roger</td>
</tr>
</table>
CSS
table {
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td {
padding: 5px;
border: solid 1px #e8eef4;
}
table th {
padding: 6px 5px;
text-align: left;
background-color: #e8eef4;
border: solid 1px #e8eef4;
}
.class1{
background-color: #97f386;
}
.class2{
background-color: #f38698;
}
JavaScript
$(function(){
$("#coolTable tr").each(function(i,row){
if($(row).children("td.anotherColumn").html()=="True") // Any condition here
{
$(row).children("td.anotherColumn").addClass("class1");
$(row).children("td.firstName").addClass("class1");
}else{
$(row).children("td.anotherColumn").addClass("class2");
$(row).children("td.firstName").addClass("class2");
}
});
});