Quesstion
Dynamic Web Design
1 Objectives covered in this laboratorya) Copy the code of “example1.htm”. The file is located in lecture 5’s
example code zip file. Then, change the ‘write’ function to output given
name/email into a HTML table. Each ‘addressBookItem’ is displayed as
a row in the table, and the fields of fname/lname/email are different
columns (see Figure 1).
Figure
Figure 1 display address book items in a table
b) Based on a), write a function called appendRow() using DOM to
append a new row in a different color at the end of the table (see
Figure 2). The content of new row is taken from the user. You can use
prompt (text, default) function to take the inputs from users.
Figure 2
Figure 2 append new row
--------------------------------------------------------------------------------------------------------------------------
Answer
Code:
a)Figure
1 display address book items in a table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Address Book</title>
<style>
table,tr,th,td
{
border: 1px solid black ;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr><br/>
<tr>
<td>Roger</td>
<td>Williams</td>
<td>rwilliams@gamil.com</td>
</tr><br>
<tr>
<td>Rose</td>
<td>Schultz</td>
<td>rose_s@earthlink.net</td>
</tr>
</table>
</body>
</html>
a B)
Figure
2 append new row
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Address Book</title> <style> table, td, th, td { border: 1px solid black; } </style> </head> <body> <table id="myTable"> <tr > <th>First Name</th> <th>Last Name</th> <th>Email Address</th> </tr><br/> <tr> <td>Roger</td> <td>Williams</td> <td>rwilliams@gamil.com</td> </tr><br> <tr> <td>Rose</td> <td>Schultz</td> <td>rose_s@earthlink.net</td> <tr> <td id="firstName"></td> <td id="lastName"></td> <td id="emailAddress"></td> </table> <br> <button onclick="appendRow()">Append New Row</button> <script> function appendRow() { var Fist = prompt("please enter your First Name", "Adam"); var Last = prompt("please enter your Last Name", "Hill"); var Email = prompt("please enter your Email Address", "aHill@gmail.com"); if (Fist,Last,Email != null){ document.getElementById("firstName").innerHTML= Fist; document.getElementById("lastName").innerHTML= Last; document.getElementById("emailAddress").innerHTML= Email; } document.getElementById("firstName").style.color="lawngreen"; document.getElementById("lastName").style.color="lawngreen"; document.getElementById("emailAddress").style.color="lawngreen"; } </script> </body> </html>
