JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<table class="record_table">
    <tr>
        <td>
            <input type="checkbox" class="column1"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="column1"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="column1"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="column1"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

CSS

.record_table {
    width: 100%;
    border-collapse: collapse;
}
.record_table td {
    border: 1px solid #CCC;
}
.current {
    background: #eee;
}

JavaScript

$("input[type='checkbox']").on('change', function() {
  if ($(this).prop('checked')) { 
    $(this).closest('tr').addClass('current');   
  }    
  else {
    $(this).closest('tr').removeClass('current');
  }
});