JSFiddle - React, Tailwind, and code Playground

by Anand Jee

HTML

<table>
    <thead>
        <tr>
            <th>Day/Time</th>
            <th>10:00</th>
            <th>11:00</th>
            <th>12:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Monday</th>
            <td>Cell data</td>
            <td>Cell data</td>
            <td>Cell data</td>
        </tr>
        <tr>
            <th>Tuesday</th>
            <td>Cell data</td>
            <td>Cell data</td>
            <td>Cell data</td>
        </tr>
        <tr>
            <th>Wednesday</th>
            <td>Cell data</td>
            <td>Cell data</td>
            <td>Cell data</td>
        </tr>
    </tbody>
</table>

CSS

thead {
    background: #EEE;
}
th {
    background: #EEE;
}
td, th {
    border: 1px #DDD solid;
    padding: 3px 7px;
}

JavaScript

$('table').on('click', 'td', function(e) {  
    var time = e.delegateTarget.tHead.rows[0].cells[this.cellIndex],
        day  = this.parentNode.cells[0];
    
    alert([$(day).text(), $(time).text()]);
});