JSFiddle - React, Tailwind, and code Playground

by rkw79

HTML

<table>
    <tr>
        <th><input type='radio' name='a'></th>
        <th><input type='radio' name='a'></th>
        <th><input type='radio' name='a'></th>
        <th><input type='radio' name='a'></th>
        <th><input type='radio' name='a'></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table td {
    border: solid 1px black;
    padding: 10px;
}

th {
    text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

$('input:radio').change(function() {
    var i = $(this).parent().index() + (1);
    $('td').removeClass('highlight');
    $('td:nth-child(' + i + ')').addClass('highlight');
});