Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 1027

9. Create the createtableFoot() function. The purpose of this function is to write the
table footer. The function has two parameters, table and cols , and creates the node
structure
<tfoot>
<tr>
<th colspan=” cols ”>
Stats compiled by SASR &copy; 2015.
All rights reserved.
</th>
</tr>
</tfoot>
where cols is the value of the cols variable. (Hint: You must use the colSpan prop-
erty to reference the colspan attribute.) Append the node structure to the table
parameter.
10. Create the createtablebody() function. The purpose of this function is to write the
rows and columns of the table body. The function has three parameters: table repre-
senting the Web table, rows , which contains the integer value of the number of rows
in the table body, and cols , which contains the integer value of the number of cells
within each table row. Use a nested for loop to generate the node structure
<tbody>
<tr>
<td class=”textCell”> stats[0][0] </td>
<td class=”numCell”> stats[0][1] </td>
…
</tr>
<tr>
<td class=”numCell”> stats[1][0] </td>
…
</tr>
…
</tbody>
where stats[0][0] , stats[0][1] , etc., are the values from the stats multidimen-
sional array you declared in Step 4. Note that for each td element, you add a class
attribute with the value textcell or numcell based on whether the value displayed
in the cell is a number or a text string. Use the isNumeric() function provided in
the table.js file to make this determination. Append the node structure to the table
parameter.
11. Create the makestatstable() function. The purpose of this function is to sort the sta-
tistical values, put the different parts of the table together, and append the table to
the Web document. Add the following commands to the function:
a. Declare a variable named rows equal to the length of the stats array.
b. Declare a variable named cols equal to the length of the head array.
c. Use the JavaScript sort method along with the colSort() function to sort the con-
tents of the stats array.
d. Create a table element named tableelem with the id statstable .
e. Call the createTableCaption(), createTableColumns(), createTableHead(),
createTableFoot(), and createTableBody() functions using tableelem as the param-
eter value for the table parameter and caption , rows , and cols as the values for
the caption , rows , and cols parameters, respectively, to construct the entire node
structure of the Web table.
f. Declare the statsbox variable, referencing the element in the Web document with
the id statsBox .
g. Replace the first child node of statsBox with the tableelem element node.