HTML and CSS Reference
In-Depth Information
5. Add a function named
showtable()
that will be used to display the table containing
the contributor list. The function has no parameters. Add the following commands to
the function:
a. Write the following code to the document to create the header row for the table
of contributions:
<table id='contributors'>
<thead>
<tr>
<th>Date</th><th>Amount</th>
<th>First Name</th><th>Last Name</th>
<th>Address</th>
</tr>
</thead>
b. Write the
<tbody>
tag to the document.
c. Next, you'll create a table row for each person listed in the
lastName
array. Create
a
for
loop that loops through each entry in the
lastName
array. Each time through
the loop, write the HTML code
<tr>
<td>
date
</td>
<td class='amt'>
amount
</td>
<td>
firstName
</td>
<td>
lastName
</td>
<td>
street
<br />
city
,
state
zip
</td>
</tr>
to the document, where
date
,
amount
,
firstName
,
lastName
,
street
,
city
,
state
, and
zip
are the items from the
date
,
amount
,
firstName,
,
lastName
,
street
,
city
, and
zip
arrays, respectively, corresponding to the value
from the counter variable in the
for
loop.
d. After the
for
loop, write the
</tbody>
tag to close off the table body.
e. Write the
</table>
tag to close off the Web table.
6. Create a function named
showsummary()
that will be used to calculate and display
the total number of contributors and the total amount of contributions. The function
has no parameters. Add the following commands to the function:
a. Declare the
total
variable, setting its initial value to 0.
b. Loop through each of the entries in the
amount
array, adding each item's value to
the
total
variable.
c. Write the HTML code
<table id='sumTable'>
<tr>
<th id='sumTitle' colspan='2'>Summary</th>
</tr>
<tr>
<th>Contributors</th>
<td>
contributors
</td>
</tr>
<tr>
<th>Amount</th>
<td>$
total
</td>
</tr>
</table>
to the document, where
contributors
is the length of the
lastName
array and
total
is the value of the
total
variable.