Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book format. How can I achieve this?
<!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 type="text/css">
.ab {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #993300;
background-color: #CCFFCC;
padding: 5px;
height: 100px;
width: 350px;
border: thin dotted #993300;
}
</style>
<script type="text/javascript">
function addressBookItem (fname, lname, email) {
this.fname= fname;
this.lname = lname;
this.email = email;
}
var x = document.createElement("TABLE");
addressBookItem.prototype.write = function() {
// var adrbook = "<p class='ab' First Name: " + this.fname + "<br />";
var adrbook = "<p class='ab'>First Name: " + this.fname + "<br />";
adrbook += "Last Name: " + this.lname + "<br />";
adrbook += "Email Address: " + this.email + "</p>";
document.write(adrbook);
}
</script>
</head>
<body>
<script type="text/javascript">
var aB1 = new addressBookItem('Roger', 'Williams', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89a9f8184848189859ba88f85898184c68b87'); // [partial email address]'
var aB2 = new addressBookItem ('Rose', 'Schultz', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99ebf6eafcc6ead9fcf8ebedf1f5f0f7f2b7f7fc'); // [partial email address]'
document.write("<table border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>Email Address</th></tr>");
aB1.write();
aB2.write();
document.write("</table");
</script>
</body>
</html>