HTML and CSS Reference
In-Depth Information
Overdue tasks
The next feature we will add is functionality to render the background of rows to show tasks
that are due in the next 2 days in orange, and tasks that are overdue in a light red colour.
Before doing so, you may have noticed that this functionality to highlight rows no longer
works:
$(taskPage).find('tbody tr').click(function(evt) {
$(evt.target).closest('td').siblings().andSelf().toggleClass('rowHighlight');
});
The reason for this should now be obvious: we are adding listeners when the screen loads,
but the tasks have not been loaded into the table at this point. We need to change these to be
a “live” event listeners using the approach documented in the jQuery chapter:
$(taskPage).find('#tblTasks tbody').on('click', 'tr', function(evt) {
$(evt.target).closest('td').siblings().andSelf().toggleClass('rowHighlight');
});
Now we are going to add functionality to render the background of the tasks. This will utilize
the following classes defined in tasks.css:
.overdue {
background: #F7DCE5;
}
.warning {
background: #F7F7DC;
}
We have two options for assigning the correct class to rows in the table: we can do it in the
template, or we can do it after all rows have been loaded in JavaScript. We will choose the
later option.
In order to implement this functionality it is necessary to compare dates in tasks to the cur-
rent date. JavaScript has a set of rudimentary functions for dealing with dates, but it is usu-
ally advisable to use a specialized date library if you need to perform extensive date manip-
ulation or calculations. This application will utilize the following library:
