html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--this page adds an inspect element to "Tab Smiths and Jones in Virginia". additional information has been added to each persons object in js. on clicking the first name data entry, an alert will display the additional info.
Shojinaga, Zachary
2019.03.01
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body onload="Smith()">
<div id="content">
<h1>Tab Smiths or Jones's living in Virginia</h1>
<p>This page dynamically creates two datatables from a predefined "database" consisting of the person's first and last name, and the state they live in (Virginia). Switch between the tables by using the corresponding tabs.</p>
<div>
<div id="add">
<button id="butA" onclick="add()">Add</button>
</div>
<button id="butS" onclick="Smith()">Smith</button> <!--buttons call functions in js to display corresponding tables-->
<button id="butJ" onclick="Jones()">Jones</button>
</div>
<div id="tabS">
<table id="Smith">
<tr>
<th>NAME</th> <!--headers for table-->
<th>L NAME</th>
<th>STATE</th>
</tr>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#content{
background-color: #333344;
border-left: 8px solid black;
}
#tabS{
background-color: #555555;
padding: 18px;
}
#tabJ{
background-color: #555555;
padding: 18px;
}
#butS, #butJ{
border: none;
}
#add{
padding: 15px 8px 15px 8px;
}
h1{
background-color: #8877AA;
padding: 8px;
}
p{
background-color: #FF8831;
margin: -10px 20px 0px 0px;
padding: 8px;
}
table, td {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*this script adds an inspect element to "Tab Smiths and Jones in Virginia". additional information has been added to each persons object. on clicking the first name data entry, an alert will display the additional info.
Shojinaga, Zachary
2019.03.01
*/
//the array is a "database" of persons by the last name of smith living in virginia
var y=[];
y[0] = { Name: "John", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[1] = { Name: "Jeff", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[2] = { Name: "Jean", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[3] = { Name: "Joey", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[4] = { Name: "Jessy", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "18", Height: "5'4"};
y[5] = { Name: "jack", LName: "Smith", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[6] = { Name: "Beth", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "18", Height: "5'4"};
y[7] = { Name: "Bill", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[8] = { Name: "Brian", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[9] = { Name: "Beverly", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "18", Height: "5'4"};
y[10] = { Name: "Benjamin", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[11] = { Name: "Bobby", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
y[12] = { Name: "Brandon", LName: "Jones", State: "Virginia", Phone: "520-520-5200", Age: "53", Height: "5'3"};
function addrow(){
document.getElementById("Smith").innerHTML = "<tr><th>NAME</th><th>L NAME</th><th>STATE</th></tr>"//table is reset before adding rows
document.getElementById("Jones").innerHTML = "<tr><th>NAME</th><th>L NAME</th><th>STATE</th></tr>"
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run