/
index.html
executable file
·115 lines (109 loc) · 4.85 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web SQL Database Example</title>
<script>
//Open or create the database
var db=openDatabase('contacts','','my contacts app', 2 * 1024 * 1024);
//Initialize the database
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS contacts(id integer primary key autoincrement, firstname, lastname, phonenumber)');
});
function addContact() {
var inputFirstName=document.getElementById("firstname").value;
var inputLastName=document.getElementById("lastname").value;
var inputPhoneNumber=document.getElementById("phonenumber").value;
db.transaction(function(tx) {
tx.executeSql('INSERT INTO contacts(firstname,lastname,phonenumber) VALUES (?,?,?)',[inputFirstName,inputLastName,inputPhoneNumber], function(tx, results) {
//Create the row and its cells
var contactRow=document.createElement("tr");
var id=document.createElement("td");
var firstname=document.createElement("td");
var lastname=document.createElement("td");
var phonenumber=document.createElement("td");
var removeButton=document.createElement("td");
//Set values coming from the database
id.textContent=results.insertId;
firstname.textContent=inputFirstName;
lastname.textContent=inputLastName;
phonenumber.textContent=inputPhoneNumber;
removeButton.innerHTML='<button onclick="removeContact('+ results.insertId +')">Delete</button>';
//Add cells to the row
contactRow.setAttribute("id","c"+results.insertId);
contactRow.appendChild(id);
contactRow.appendChild(firstname);
contactRow.appendChild(lastname);
contactRow.appendChild(phonenumber);
contactRow.appendChild(removeButton);
//Add the row to the table
document.getElementById("contacts").appendChild(contactRow);
});
});
}
function removeContact(id) {
db.transaction(function(tx) {
tx.executeSql('DELETE FROM contacts WHERE id=?', [id], function() {
//Dynamically remove the deleted contact from the table
var contactTable=document.getElementById("contacts");
var contactToDelete=document.getElementById("c"+id);
contactTable.removeChild(contactToDelete);
});
});
}
function listContacts() {
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM contacts', [], function(tx, results) {
var len=results.rows.length;
var i;
for(i=0; i<len; i++) {
//Create the row and its cells
var contactRow=document.createElement("tr");
var id=document.createElement("td");
var firstname=document.createElement("td");
var lastname=document.createElement("td");
var phonenumber=document.createElement("td");
var removeButton=document.createElement("td");
//Set values coming from the database
id.textContent=results.rows.item(i).id;
firstname.textContent=results.rows.item(i).firstname;
lastname.textContent=results.rows.item(i).lastname;
phonenumber.textContent=results.rows.item(i).phonenumber;
removeButton.innerHTML='<button onclick="removeContact('+ results.rows.item(i).id +')">Delete</button>';
//Add cells to the row
contactRow.setAttribute("id","c"+results.rows.item(i).id);
contactRow.appendChild(id);
contactRow.appendChild(firstname);
contactRow.appendChild(lastname);
contactRow.appendChild(phonenumber);
contactRow.appendChild(removeButton);
//Add the row to the table
document.getElementById("contacts").appendChild(contactRow);
}
});
});
}
window.addEventListener("load", listContacts, true);
</script>
</head>
<body>
<div id="container">
<section id="input">
<h1>Add Contacts</h1>
<label>Firstname: <input type="text" name="firstname" id="firstname" /></label>
<label>Lastname: <input type="text" name="lastname" id="lastname" /></label>
<label>Phone number: <input type="tel" name="phonenumber" id="phonenumber" /></label>
<button onclick="addContact()">Add</button>
</section>
<section id="output">
<h1>View Contacts</h1>
<table id="contacts" border="1" cellspacing="0" style="width:100%">
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phonenumber</th>
</table>
</section>
</div>
</body>
</html>