JSFiddle - React, Tailwind, and code Playground

by Aravind Baskaran

HTML

<select id="DrugTime" onchange="setRowBGColor();">
    <option value="1">00:00</option>
    <option value="2">00:30</option>
    <option value="3">01:00</option>
    <option value="4">01:30</option>
    <option value="5">02:00</option>
    <option value="6">02:30</option>
    <option value="7">03:00</option>
    <option value="8">03:30</option>
    <option value="9">04:00</option>
    <option value="10">04:30</option>
    <option value="11">05:00</option>
    <option value="12">05:30</option>
    <option value="13">06:00</option>
    <option value="14">06:30</option>
    <option value="15">07:00</option>
    <option value="16">07:30</option>
    <option value="17">08:00</option>
    <option value="18">08:30</option>
    <option value="19">09:00</option>
    <option value="20">09:30</option>
    <option value="21">10:00</option>
    <option value="22">10:30</option>
    <option value="23">11:00</option>
    <option value="24">11:30</option>
    <option value="25">12:00</option>
    <option value="26">12:30</option>
    <option value="27">13:00</option>
    <option value="28">13:30</option>
    <option value="29">14:00</option>
    <option value="30">14:30</option>
    <option value="31">15:00</option>
    <option value="32">15:30</option>
    <option value="33">16:00</option>
    <option value="34">16:30</option>
    <option value="35">17:00</option>
    <option value="36">17:30</option>
    <option value="37">18:00</option>
    <option value="38">18:30</option>
    <option value="39">19:00</option>
    <option value="40">19:30</option>
    <option value="41">20:00</option>
    <option value="42">20:30</option>
    <option value="43">21:00</option>
    <option value="44">21:30</option>
    <option value="45">22:00</option>
    <option value="46">22:30</option>
    <option value="47">23:00</option>
    <option value="48">23:30</option>
</select>

<table id="TimeSlot">
    <thead>
        <tr>
            <td><b>Time Slot</b></td>
            <td><b>Time...

JavaScript

function setRowBGColor() {
    var rows = $("#TimeSlot").find('tr');
    var lowestBound = parseInt($(rows[1]).find("td").eq(1).text().split('-')[0]);
    var time = $("#DrugTime option:selected").text().replace(':', '');
    time = parseInt(time, 10);
    if(time < lowestBound){
        time += 2400;
    }
    rows.each(function (i) {
        var $tds = $(this).find('td'),
            timeslot = $tds.eq(0).text(),
            timerange = $tds.eq(1).text().split('-');
        timerange[0] = parseInt(timerange[0],10);
        timerange[1] = parseInt(timerange[1],10);
        if(timerange[1] < timerange[0]){
            timerange[1] += 2400;
        }
        if (!isNaN(timerange[0])&& time >= timerange[0] && time <= timerange[1]) {
            alert('Row ' + (i - 1) + ':\nTime Slot: ' + timeslot + '\nTime Range: ' + $tds.eq(1).text());
        }
    });
}