| <!DOCTYPE html> |
| |
| <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <meta charset="utf-8"> |
|
|
| <title></title> |
| <meta name="description" content="The HTML5 Herald"> |
| <meta name="author" content="SitePoint"> |
| <script type="text/javascript"> |
| //Create |
| //Read |
| //Update |
| //Delete |
| var db; |
| var shortName = 'WebSqlDB'; |
| var version = '1.0'; |
| var displayName = 'WebSqlDB'; |
| var maxSize = 60000; |
| var contentString = ""; |
|
|
| db = openDatabase(shortName,version,displayName,maxSize); |
|
|
| db.transaction(function(tx){ |
| tx.executeSql('Create table if not exists User (UserID INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)',[],nullHandler,errorHandler); |
| },errorHandler,successCallBack) |
|
|
| //insert |
| // |
| // |
| function addName(){ |
| db.transaction(function(transaction){ |
| var fname = document.getElementById("firstName").value; |
| var lname = document.getElementById("lastName").value; |
| console.log('insert into User (FirstName,LastName) values (\'' + fname + '\',\'' + lname + '\')'); |
| transaction.executeSql('insert into User (FirstName,LastName) values(\'' + fname + '\',\'' + lname + '\')' ,[],nullHandler,errorHandler); |
| // |
| //transaction.executeSql('insert into User (FirstName,LastName) values(?,?)' ,[fname,lname],nullHandler,errorHandler); |
|
|
| },errorHandler,successCallBack); |
| displayResults(); |
| } |
|
|
| function displayResults(){ |
| document.getElementById("list").innerHTML = "" |
| contentString = "" |
| db.transaction(function(transaction){ |
| transaction.executeSql('select UserID,FirstName,LastName from User;',[], function (transaction,result){ |
| console.log("result is " + result.rows.length); |
| for (var i=0;i<result.rows.length;i++){ |
| var row = result.rows.item(i); |
| contentString += row.FirstName + ' ' + row.LastName + '<br>' |
| document.getElementById("list").innerHTML = contentString |
| }//close for loop |
| },errorHandler); |
| },errorHandler,nullHandler);//ends transaction |
| }//ends function |
|
|
|
|
| function successCallBack(){ |
| |
| } |
|
|
|
|
| function errorHandler(transaction,error){ |
| console.log('Error:' + error.message + 'code: ' + error.code); |
| } |
|
|
| function nullHandler(){ |
|
|
| } |
|
|
| </script> |
|
|
|
|
| </head> |
| <body onload="displayResults();"> |
| <span id="list">Kris Secor<br> <br>Paul Savig<br>Carlos Santana<br> <br></span> |
|
|
| <label for="firstName">First Name:</label> <input type="text" id="firstName"><br> |
| <label for="lastName">Last Name:</label> <input type="text" id="lastName"><br> |
| <input type="button" value="Insert" onclick="addName()" ;=""> |
|
|
|
|
|
|
|
|
| |
| </body></html> |