JSFiddle - React, Tailwind, and code Playground

by rkw79

HTML

<table>
    <thead>
        <tr>
            <th></th>
            <th>Úterý<br />06.12.2011</th>
           <th>Středa<br />07.12.2011</th>
       </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>08:00</td>
            <td><div class="form-item" id="edit-datetime-worker-wrapper">
                <label class="option" for="edit-datetime-worker">
                <input type="radio" id="edit-datetime-worker" name="datetime_worker" value="2011-12-06T08:00:00::3"   class="form-radio" />
                <span>6. 12. 2011 – 08:00</span></label>
                </div>
            </td>
            <td><div class="form-item" id="edit-datetime-worker-11-wrapper">
                <label class="option" for="edit-datetime-worker-11">
                <input type="radio" id="edit-datetime-worker-11" name="datetime_worker" value="2011-12-07T08:00:00::3"   class="form-radio" />
                <span>7. 12. 2011 – 08:00</span></label>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td>08:30</td>
            <td><div class="form-item" id="edit-datetime-worker-1-wrapper"></div></td>
            <td><div class="form-item" id="edit-datetime-worker-12-wrapper">
                <label class="option" for="edit-datetime-worker-12">
                <input type="radio" id="edit-datetime-worker-12" name="datetime_worker" value="2011-12-07T08:30:00::3"   class="form-radio" />
                <span>7. 12. 2011 – 08:30</span></label>
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td>09:00</td>
            <td><div class="form-item" id="edit-datetime-worker-2-wrapper">
                <label class="option" for="edit-datetime-worker-2">
                <input type="radio" id="edit-datetime-worker-2" name="datetime_worker" value="2011-12-06T09:00:00::3"   class="form-radio" />
                <span>6. 12. 2011 – 09:00</span></label>
                </div>
            </td>
          ...

CSS

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

th {
    text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

$('input:radio').change(function() {
    var num = 2;
    var col = $(this).closest('td').index() + 1;
    var row = $(this).closest('tr').index();
    
    var tds = $('td:nth-child(' + col + ')');
    tds = tds.slice(row,row+num);
    
    $('td').removeClass('highlight');
    tds.addClass('highlight');
});