JSFiddle - React, Tailwind, and code Playground

HTML

<table class="record_table">
    <tr>
        <td>
            <input type="radio" name="test" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="radio"  name="test"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="radio"  name="test"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="radio"  name="test"/>
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

CSS

.record_table {
    width: 100%;
    border-collapse: collapse;
}
.record_table tr:hover {
    background: #eee;
}
.record_table td {
    border: 1px solid #eee;
}
.highlight_row {
    background: #eee;
}

JavaScript

$(document).ready(function () {
    $('.record_table tr').click(function (event) {
        if (event.target.type !== 'radio') {
            $(':radio', this).trigger('click');
        }
    });

    $("input[type='radio']").change(function (e) {
        e.stopPropagation();
        $('.record_table tr').removeClass("highlight_row");        
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        }     
    });
});