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
<!-- Created by Zachary Shojinaga-->
<!--this page combines "Display Smiths in Virginia" and "Tabular tables". two tables(Smith and Jones) are dynamically filled using a predefined "database" in js. only one table displays at a time, but they can be tabbed between by using the corresponding buttons.
Shojinaga, Zachary
2019.02.27
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<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>
<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>
</table>
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
/* Created by Zachary Shojinaga */
#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;
}
h1{
background-color: #8877AA;
padding: 8px;
}
p{
background-color: #FF8831;
margin: -10px 20px 40px 0px;
padding: 8px;
}
table, th, td {
border: 1px solid black;
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
// Created by Zachary Shojinaga
/*this script combines "Display Smiths in Virginia" and "Tabular tables". two tables(Smith and Jones) are dynamically filled based on condition of last name using a predefined "database"(array of objects). two functions allow the change between views by adjusting the CSS of the two tables.
Shojinaga, Zachary
2019.02.27
*/
//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"};
y[1] = { Name: "Jeff", LName: "Smith", State: "Virginia"};
y[2] = { Name: "Jean", LName: "Smith", State: "Virginia"};
y[3] = { Name: "Joey", LName: "Smith", State: "Virginia"};
y[4] = { Name: "Jessy", LName: "Smith", State: "Virginia"};
y[5] = { Name: "jack", LName: "Smith", State: "Virginia"};
y[6] = { Name: "Beth", LName: "Jones", State: "Virginia"};
y[7] = { Name: "Bill", LName: "Jones", State: "Virginia"};
y[8] = { Name: "Brian", LName: "Jones", State: "Virginia"};
y[9] = { Name: "Beverly", LName: "Jones", State: "Virginia"};
y[10] = { Name: "Benjamin", LName: "Jones", State: "Virginia"};
y[11] = { Name: "Bobby", LName: "Jones", State: "Virginia"};
y[12] = { Name: "Brandon", LName: "Jones", State: "Virginia"};
function addrow(){
for (I=0; I<y.length; I++) //runs through all entries in the database
{
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run