My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function:
$(document).ready(function()
{
// create 9:00 and 9:30 cells for both employees
generateAvailabilityGrid($("#oneDay"), 30, 9, 10);
});
/* NOTE: This function works as expected. I have tested it */
// function that generates the availability grid for availabilitySchedule
// parameters: ID of container to write availability grid to (or index), size of interval block (in minutes, as integer), (optional) start time, (optional) end time
function generateAvailabilityGrid(identifier, intervalSize, floatStartTime, floatEndTime)
{
// for good measure, define floatStartTime,floatEndTime as 9 AM,9 PM, respectively
floatStartTime = floatStartTime || 9;
floatEndTime = floatEndTime || 21;
// enforce intervalSize to be greater than 10
if (intervalSize < 10) return;
// enforce floatSize,floatEndTime to be between 0 and 23.99
if (((floatStartTime < 0) || (floatStartTime >= 24)) || ((floatEndTime <= 0) || (floatEndTime >= 24))) return;
// create container div element (will serve as availabilityTable)
var tableDiv = $('<<div class="table"></div>>');
// create dummy row div, dummy cell div
var dummyRowDiv = $('<div class="tableRow"></div>'),
dummyCellDiv = $('<div class="tableCell"></div>');
// get names from #employeeTable
var names = $('#employeeTable tr:not(#titleRow)').map(function() { return $(this).children(':lt(2)').map(function() { return $(this).children('input').val(); }).get().join(" "); });
// for every name in names
$(names).each(
function()
{
// copy dummy row and append label with name to it
var row = $(dummyRowDiv).clone();
row.append($("<label></label>").text(this));
for (var m = floatStartTime * 60; m < floatEndTime * 60; m += intervalSize)
{
// create cells
var tempCell = $(dummyCellDiv).clone();
if ((m % 60 == 0) && (m > floatStartTime))
{
$(tempCell).addClass('hourMark');
}
// have cell, on click, be marked 'available'
$(tempCell).click(function() { $(this).toggleClass('available'); });
// TODO: fetch data and use it to "fill" appropriate cells
// append cells to row
$(row).append(tempCell);
}
// append row to container div
$(tableDiv).append(row);
});
// determine if identifier is int
var isIntIdentifier = (identifier > -1);
// append tableDiv to div identified by identifier
// if identifier is int
if (isIntIdentifier)
{
// use index to get container to append tableDiv to and append
$('#availabilitySchedule :nth-child(' + (identifier + 1) + ')').append(tableDiv);
}
else
{
// get container to append tableDiv to by name and append
$(identifier).append(tableDiv);
}
}
The CSS rules that are being targeted but not taking effect are:
.hourMark
{
border-right: 2px solid #000;
}
.available
{
background: #0f0;
}
It appears that the issue may lie in attempting to add classes and mouse click listeners to temporary objects within the for-loop. Here is a minimal reproducible example of the problem: https://jsfiddle.net/b73fo0z5/
Does this mean that I will need to define everything outside the for-loop, after the cells have been added to the table div? If so, can you explain why?