HTML and CSS Reference
In-Depth Information
4. Go to the
table.js
JavaScript file. Below the comment section, declare the following
global variables:
a.
caption
, which is used to store the text of the table caption. Set its initial value to
the value of the
qbStatsCaption
variable.
b.
head
, which is used to store the array of column headings. Set its initial value to
the value of the
qbStatsHead
variable.
c.
sortindex
, which is used to store the column index of the table column by which
the stats table will be sorted. Set its initial value to the value of the
qbStatsSort
variable.
d.
stats
, which is used to store the multidimensional array of player statistics. Set its
initial value to the value of the
qbStats
variable.
e.
sortdown
, which is used to indicate whether the table is sorted in descending or
ascending order. Set its initial value to
true
.
5. Add a command to run the makeStatsTable() function when the page is loaded by
the browser.
6. You'll create the Web table with separate functions for each part of the table. The first
function you'll create is the
createtablecaption()
function, which is used to create
the structure of the table caption. The function has two parameters,
table
and
caption
, which are used for the
table
element node and the caption text, respec-
tively. Have the function create the element node
<caption>
caption
</caption>
where
caption
is the value of the
caption
parameter, and then append that element
node to the
table
parameter.
7. Create the
createtablecolumns()
function. The purpose of this function is to cre-
ate the structure of the
colgroup
element. The function has two parameters:
table
,
which represents the
table
element, and
cols
, which is an integer containing the
number of columns in the column group. Use a
for
loop to generate the node
structure
<colgroup>
<col />
<col class=”sortColumn” />
<col />
…
</colgroup>
where the number of nested
col
elements is equal to the value of the
cols
parameter.
Note that Walter wants the column by which the table is sorted to be given the class
name
sortColumn
. Therefore, within your
for
loop, test each index number to deter-
mine whether it equals the
sortIndex
variable. If it does, add the
class
attribute to
the
col
element. Append the node structure to the
table
parameter.
8. Create the
createtablehead()
function. The purpose of this function is to write the
table header. The function has two parameters:
table
for the
table
element and
cols
for the number of columns in the header. Use a
for
loop to create the node structure
<thead>
<tr>
<th id=”1sortcolumn”>
head[1]
</th>
<th id=”2sortcolumn”>
head[2]
</th>
…
</tr>
</thead>
where
head[1]
,
head[2]
, etc., are the values from the
head
array global variable
you declared in Step 4. Append the node structure to the
table
parameter.
