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);

"and every other with the day of the week" what other? can you please elaborate? ... A "picture" of the desired result would be helpful — Roko C. Buljan
– Roko C. Buljan, Commented Jul 17, 2016 at 3:56
can you post a desired output?.. might help figuring out what u mean.. — XDProgrammer
– XDProgrammer, Commented Jul 17, 2016 at 4:00
As an aside, an easier (and generally considered best-practice) way to create and populate those arrays is var month = ["January", "February", "March", "April", "etc."]; (with or without linebreaks after each comma, depending on what you find more readable). Which apparently you already know given that's how you do dayHours. — nnnnnn
– nnnnnn, Commented Jul 17, 2016 at 4:26

ScientiaEtVeritas · Accepted Answer · 2016-07-17 06:07:39Z

0

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.

edited Jul 17, 2016 at 6:07

answered Jul 17, 2016 at 4:57

ScientiaEtVeritas

5,3184 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nick N. Over a year ago

@rokocbuljan I mean every first row of the next column to be populated with a day of the week . Here is example what I am trying to achieve . IMG

Nick N. Over a year ago

@ XDProgrammer here is a example image

ScientiaEtVeritas Over a year ago

It is just the same. You first create a table row, loop over your days of the week. And append that row to your table. And in another loop you go for the hours. If one column cell needs to be empty just append $('<td></td>') to the table row.

Nick N. Over a year ago

Hello folks . Thank you for the quick replies and your time for helping me. @scientiaetveeritas thank you for your code it helped me a lot and I learned from it much. I guess i should not rush with the coding and spend a little more of my time reading the documentations first :) Best regards

ScientiaEtVeritas Over a year ago

Hi @NickN. if this or any answer has solved your question please consider accepting it by clicking the check-mark on the left. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.

|

Collectives™ on Stack Overflow

Adding Arrays inside a table tag with JavaScript (schedule)

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related