JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<table id="ProgramsGridFromCMTV" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <td>TIME</td>
                                <td>PROGRAMS</td>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

JavaScript

var period = 30;

            ////////////CONSTRUIR TABELA CONSOANTE O INTERVALO DE TEMPO!///////////////
            function buildHoursOnTable(periodicity) {
                var table = $("#ProgramsGridFromCMTV");
                var tbody = $(table).find('tbody').empty();
                var hour = function (m) {
                    return Math.floor(m / 60);
                }

                var min = function (m) {
                    return m - hour(m) * 60;
                }

                var beginHour = 2 * 60 + 30;
                var endHour = 26 * 60 + 30;

                var rows = "";
                while (beginHour < endHour) {
                    rows += '<tr id=' + beginHour + '>'
                    + '<td>'
                        + ('0' + hour(beginHour)).slice(-2, 3) + ':'
                        + ('0' + min(beginHour)).slice(-2, 3)
                    + '</td>'
                    + '</tr>'

                    beginHour += periodicity;
                }
                tbody.append(rows);

            };



            function buildDataonTable(name, beginHour, time, periodicity) {

                var min = function (m) {
                    var arr = m.split(':');
                    return parseInt(arr[0]) * 60 + parseInt(arr[1]);
                }

                var table = $('#ProgramsGridFromCMTV');
                var tr = $(table).find('tbody tr');

                var rowspan = function (m) {
                    return Math.floor(m / periodicity);
                };
                var certaintime = min(time);
                var begin = min(beginHour);
                var end = 26 * 60 + 30;

                var beginTimeForFill = parseInt(beginHour.split(':')[0]) * 60 + 30;

                var rows = "";
                while (begin < end) {

                    if (begin === beginTimeForFill) {
                        rows += '<td rowspan=' + rowspan(certaintime) + ' id="td_rs_' + rowspan(certaintime) + '">';
          ...