Description
Overview
For this lab, you will add DHTML behavior to an existing web page (lab05.html). This example builds on a
previous lab (Lab 04), and you should copy the JavaScript code from your solution for that lab before you
begin. The HTML page contains a table, which you should make clickable like a spreadsheet program.
When a cell is clicked, the cell will become editable.
Figure 1: The table with nothing selected.
Instructions
Clickable Column and Row Headers
The clickable column and row headers will operate exactly the way they did in the previous lab. Copying
the event handlers from the previous lab will suffice for this functionality.
Clickable Cells
We also want the other cells (also TD elements) to be clickable, but not in the same way as with the
previous lab. When the cell is clicked, its contents should be replaced with a text field containing the
existing value. Write an event handler for these cells (not one for each, but one that works for all of them)
that (when clicked) highlights the cell itself with a background colour of ‘lightBlue’.
Figure 2: The table when the cell containing ‘3.4’ has been clicked
For the newly created text field, add an event handler for ‘Enter’ which will update the value to the new
content typed by the user.
2
Figure 3: The table when the cell is updated to the value 3.75
How to Submit
Submit the HTML, CSS, and JavaScript files in a ZIP file, with a name following the same pattern as
previous labs: Lab05_FirstNameLastName_StudentNumber.zip (e.g. Lab05_RandyFortier_100539147.zip)
to the TA.
