Description
Overview
For this lab, you will add DHTML behavior to an existing web page (lab04.html). The HTML page contains
a table, which you should make clickable like a spreadsheet program.
Figure 1: The table with nothing selected.
Instructions
Clickable Column Headers
In our table, we want the column headers (TH elements) to be clickable. Write an event handler for the
column headers (not one for each, but one that works for all of them) that (when clicked) highlights each
cell in that column with a background colour of ‘lightBlue’.
Hint: When assigning the click event handler to the column header th tags, store the index (column #) in a
property in that th’s DOM object.
Figure 2: The table when the ‘Asmt 2’ column header has been clicked
Clickable Rows
We also want the first cell in each row (TD elements) to be clickable. Write an event handler for these cells
(not one for each, but one that works for all of them) that (when clicked) highlights each cell in that row with
a background colour of ‘lightBlue’.
Figure 3: The table when the ‘100000002’ row header has been clicked
2
Clickable Cells
Finally, we also want the other cells (also TD elements) to be clickable. 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 4: The table when the cell containing ‘3.4’ has been clicked
How to Submit
Submit the HTML, CSS, and JavaScript files in a ZIP file, with a name following the same pattern as
previous labs: Lab04_FirstNameLastName_StudentNumber.zip (e.g. Lab04_RandyFortier_100539147.zip)
to the TA.
