JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<table>
    <tr class="" role="row">
        <td class="e-rowcell e-templatecell" role="gridcell" style="text-align: center;">
            <input type="checkbox" class="XAxisrowCheckbox">
        </td>
        <td class="e-rowcell e-hide" role="gridcell" style="text-align: left;">0</td>
        <td class="e-rowcell" role="gridcell" style="text-align: left;">Location ID</td>
    </tr>
    <tr class="e-alt_row" role="row" aria-selected="true">
        <td class="e-rowcell e-templatecell e-selectionbackground e-active" role="gridcell" style="text-align: center;">
            <input type="checkbox" class="XAxisrowCheckbox">
        </td>
        <td class="e-rowcell e-hide e-selectionbackground e-active" role="gridcell" style="text-align: left;">1</td>
        <td class="e-rowcell e-selectionbackground e-active" role="gridcell" style="text-align: left;">Location Name</td>
    </tr>
</table>

CSS

.red {
    background-color: red;
}

JavaScript

$(document).on('click', '.XAxisrowCheckbox', function () {     
    $(this).parents("tr").toggleClass("red", this.checked);
});