JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cdiv" style="width:100%;" spry:region="ds1">
    <table id="tableDg" 
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 
        
        <thead>
            <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB"> 
                <th width="2%"><input id="chkbHead" type='checkbox' /></th>
                <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
                <th width="22%" align="center" spry:sort="host"><b>Country</b></th> 
                
            </tr>
        </thead>
        
        <tbody spry:repeat="pv1">   
            <tr id="trOdd"   
            spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
            style="color :#2F5882;background-color: #FFFFFF" class="{ds_OddRow}"> 
                <td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
            <td width="10%" align="center">&nbsp;&nbsp;{name}</td> 
            <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 
            
            
        </tr> 
            
            <tr id="trEven" 
            spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
            style="color :#2F5882;background-color: #EDF1F5;" class="{ds_EvenRow}"> 
                <td><input type="checkbox" class = "chkbCsm"></input></td>
            <td id="tdname" width="10%" align="center">&nbsp;&nbsp;{name}</td> 
            <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 
            
        </tr>
        </tbody>
    </table>
</div>

JavaScript

$("#trEven").css({
    "background-color": "red"
});