HTML and CSS Reference
In-Depth Information
12. Save your changes to the file, and then load
nflstats.htm
in your Web browser. Verify
that the content of the Quarterbacks table is displayed on the page.
13. Next, you'll enable users to sort the table by different columns. Return to the
table.js
file in your text editor. Go to the createTableHead() function. For each
th
element
node generated in your
for
loop, add an
onclick
event handler to run the
changeDirection() function when clicked.
14. Create the
changedirection()
function. The purpose of this function is to either
change the sorting direction of the currently selected column, or sort the table by a
newly selected column. Add the following commands to the function:
a. Use the
parseInt()
function to extract the index number from the currently
selected column. (Hint: Use the
this
keyword.)
b. If the index number is equal to the value of the
sortIndex
global variable you cre-
ated in Step 4 (indicating that the user has clicked the current sort column), use
the negation operator to change the Boolean value of the global
sortDown
vari-
able from
false
to
true
or from
true
to
false
. Otherwise, change the value of
the
sortIndex
variable to the index number of the currently selected column.
c. Call the makeStatsTable() function to regenerate the statistics table.
15. Save your changes to the file, and then reload
nflstats.htm
in your Web browser.
Verify that you can change the sorting column by clicking each column heading,
and that you can toggle the sorting direction by clicking each column heading in
succession.
16. Next, you'll enable users to select different statistics tables to view in the Web page.
Return to the
table.js
file in your text editor. Create the
changetable()
function with
a single parameter:
statscategory
. The
statsCategory
parameter will contain a text
string indicating the statistics table to view. Add the following commands to the
function:
a. Use the
eval()
function to change the values of the global variables
caption
,
head
,
sortIndex
, and
stats
to the value of the
statsCategory
Caption,
statsCategory
Head,
statsCategory
Sort, and
statsCategory
variables, respectively,
where
statsCategory
is the value of the
statsCategory
parameter.
b. Change the value of the
sortDown
global variable to
true
.
c. Call the makeStatsTable() function to regenerate the statistics table.
17. Add informative comments to the code in your file and then close the file, saving
your changes.
18. Return to the
nflstats.htm
file in your text editor. Locate the
input
elements for the
five table buttons, and then add an
onclick
attribute to each input button to run the
command
changeTable(
stats
)
where
stats
is either
qbstats
,
rbstats
,
wrstats
,
krstats
, or
prstats
depending on
whether the
Quarterbacks
,
Running Backs
,
Wide Receivers
,
Kick Returners
, or
Punt
Returners
button is clicked.
19. Save your changes to the file, and then reload
nflstats.htm
in your Web browser.
Verify that you can load different statistics tables by clicking the five statistical cat-
egory buttons.
20. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
