Adding Arrays inside a table tag with JavaScript (schedule)

Question

I am really new to JavaScript so I am sorry about any misunderstanding in advance. I have some arrays but I don't have any idea how to put them in a table in the order I want.

I want the first column to be filled with the day hours, and every other with the day of the week. The second column always need to be the current day, the other cells need to be empty. Here is the code so far:

function GetDates(startDate, daysToAdd) {
    var aryDates = [];

    for (var i = 0; i <= daysToAdd; i++) {
        var currentDate = new Date();
        currentDate.setDate(startDate.getDate() + i);
        aryDates.push(DayAsString(currentDate.getDay()) + ", " + currentDate.getDate() + " " + MonthAsString(currentDate.getMonth()) + " " + currentDate.getFullYear());
    }

    return aryDates;
}

function MonthAsString(monthIndex) {
    var d = new Date();
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    return month[monthIndex];
}

function DayAsString(dayIndex) {
    var weekdays = new Array(6);
    weekdays[0] = "Sunday";
    weekdays[1] = "Monday";
    weekdays[2] = "Tuesday";
    weekdays[3] = "Wednesday";
    weekdays[4] = "Thursday";
    weekdays[5] = "Friday";
    weekdays[6] = "Saturday";

    return weekdays[dayIndex];
}

var dayHours = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', ]
var startDate = new Date();
var aryDates = GetDates(startDate, 7);

$('#example').html(aryDates);

Answer 1

You can create the desired HTML elements directly in JavaScript, since there is no routine for this.

At the beginning of your loop you create a table row like this:

var $tr = $('<tr></tr>');

Then you add your cells to that row similiar to this:

var $td = $('<td>' + value + '</td>')
$tr.append($td);

You have to do this for every column you want to be shown – (just replace value with the value you want). So you create a new cell, append it to the table row $tr. In the end of that loop you append this $tr to your table.

$('#example').append($tr);

Assumed that your table has the id example.

To achieve what's in your image:

First: Create Table Row, Loop over Dates in which you create Table Cells, Append To Table Row, Append to Table

var $tr = $('<tr></tr>');
$tr.append($('<td>hours</td>'));
aryDates.forEach(function(date) {
  var $td = $('<td>' + date + '</td>');
  $tr.append($td);
});
$('#example').append($tr);

Second: Loop over hours, create td, append it to tr, and inside that loop, create another with the number of empty cells you want, and just append always an empty td to that table row, after all you append it to the table

dayHours.forEach(function(hour) {
  var $tr = $('<tr></tr>');
  var $td = $('<td>' + hour + '</td>');
  $tr.append($td);
  for(var i = 0; i < aryDates.length; i++) {
    $tr.append('<td></td>');
  } 
  $('#example').append($tr);
});

Similar questions that could help you are:

insert elements from array to table in jquery/js

Populate table from array using JQuery

Alternatively you could check out frameworks like Angular or React.js that auto-update the DOM.