demo_using_websql.js

/******************************************************************
Author: Thitipong Samranvanich 
Since : 6 June 2017  
objective:  Demo  How to use WebSQL in Google Chrome Console 
               Create Database , Create Table , Insert Data , Select Data to Display as HTML 
TestWith : Google Chrome version 58.x.x.x
Platform : Windows  
*********************************************************************/


// Open DB / Create DB 
var db = openDatabase("mydb1","1.0","My Test DB", 2*1024*1024);

// Create Table 
db.transaction( function(tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS Product (id unique, PName, Remain, LastUpdate)');
}  );

// Insert Data To Table  
db.transaction( function(tx){
    tx.executeSql('INSERT INTO Product (id,PName, Remain,LastUpdate) VALUES (?,?,?,?)', [1,"เลย์",200,"2016-05-08 15:19"]);
}  );
    
 
undefined
db.transaction( function(tx){
    var rec =  [2,"ปลากระป๋อง 3 แม่ครัว",420,"2016-05-08 15:19"] ; 
    tx.executeSql('INSERT INTO Product (id,PName, Remain,LastUpdate) VALUES (?,?,?,?)', rec );
}  );

// Select only Rows Count 
db.transaction( function(tx){
    
    tx.executeSql('select * from Product ' , [] , function(tx,results){
         var len = results.rows.length, i ;
         var htm = "<br><font color=red> Found rows = " + len + "</font>";
         document.querySelector("#status1").innerHTML += htm  ;
    } );
}  );

//===Query Result As Table 
db.transaction( function(tx){
    
    tx.executeSql('select * from Product ' , [] , function(tx,results){
         var len = results.rows.length, i ;
         var htm = "<font color=red> Found rows = " + len + "</font>";
         
		 htm += "<table border='1'>";
         htm += "<tr align='center'><td>สินค้า</td><td>คงเหลือ</td></tr>"; 
         for(var i = 0 ;i< len ; i++){
              var item = results.rows.item(i); 
              htm = htm + "<tr><td>" +  item.PName  +  "</td><td align='right' >" +  item.Remain  + "</td></tr>" ;
         }
         htm += "</table>";
         document.querySelector("#status1").innerHTML += htm  ;

    } );
}  );