Web SQL Example

by fiddledrew

HTML

<script>
  //Test for browser compatibility
  //https://jsfiddle.net/fiddledrew/76srLbwr/1116/
  if (window.openDatabase) {
    //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB
    var mydb = openDatabase("cars_db", "0.1", "A Database of Cars I Like", 1024 * 1024);

    //create the cars table using SQL for the database using a transaction
    mydb.transaction(function(t) {
      t.executeSql("CREATE TABLE IF NOT EXISTS cars (id INTEGER PRIMARY KEY ASC, make TEXT, model TEXT, notes TEXT)");
    });



  } else {
    alert("WebSQL is not supported by your browser!");
  }

  //function to output the list of cars in the database

  function updateCarList(transaction, results) {
    //initialise the listitems variable
    var listitems = "";
    //get the car list holder ul
    var listholder = document.getElementById("carlist");


    //clear cars list ul
    listholder.innerHTML = "";

    listholder.innerHTML += "<h> You have " + results.rows.length + " records</h>"

    var i;
    //Iterate through the results
    for (i = 0; i < results.rows.length; i++) {
      //Get the current row
      var row = results.rows.item(i);

      listholder.innerHTML += "<li><a>" + row.make + " - " + row.model + " - " + row.notes + " - " + row.id + "</a>(<a href='javascript:void(0);' onclick='deleteCar(" + row.id + ");'> Delete Car </a>)";
    }

  }

  //function to get the list of cars from the database

  function outputCars() {
    //check to ensure the mydb object has been created
    if (mydb) {
      //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command
      mydb.transaction(function(t) {
        t.executeSql("SELECT * FROM cars", [], updateCarList);
      });
    } else {
      alert("db not found, your browser does not support web sql!");
    }
  }

  //function to get the list of cars from...

CSS

# Month#Date#Details #Expense - RW#Type#Bank#Owing#TF to Runway#TF to DP Cloud 42856#42880#SJD#Expense#Accountancy#13### 42856#42865#SJD#Expense#Accountancy#144### 42856#42885#S Patel#Expense#Salary#812### 42856#42870#Mileage#Expense - RW#travel##48#48# 42887#42887#VAT Paid#HMRC#VAT#4820.4### 42887#42898#SJD#Expense#Accountancy#144### 42887#43277#S Patel#Expense#Salary#812### 42887#42902#Mileage#Expense - RW#travel##208#208# 42917#42926#sjd#Expense#Accountancy#144### 42917#42947#S Patel#Expense#Salary#812### 42917#42928#milage#Expense - RW#travel##240#240# 42917#42917#Paint#Expense - RW#sundry##50#50# 42917#42917#Dust Covers#Expense - RW#sundry##50#50# 42917#42933#Folding Ladder#Expense - RW#sundry##150#150# 42917#42928#Hatfield Council#Expense - RW#sundry owing##398## 42917#42742#D A Mcneil#Expense - RW#sundry owing##540## 42948#42957#sjd#Expense#Accountancy#144### 42948#42969#Mark CLIMp#Expense#Internet#3000### 42948#42972#S Patel#Expense#Salary#812### 42948#42976#VAT Paid#HMRC#VAT#6831### 42948#42962#Mileage#Expense - RW#travel##80#80# 42979#42990#sjd#Expense#Accountancy#144### 42979#42972#S Patel#Expense#Salary#812### 42979#42993#Mileage#Expense - RW#travel##80#80# 42979#42979#Traders only Data#Expense#software##400##400 42979#43344#WH Brown#Expense - RW#sundry owing##540## 43009#43018#sjd#Expense#Accountancy#144### 43009#43028#S Patel#Expense#Salary#728### 43009#43028#D Patel#Expense#Salary#5684### 43009#43023#Mileage#Expense - RW#travel##64#64# 43040#43049#sjd#Expense#Accountancy#144### 43040#43067#S Patel#Expense#Salary#728### 43040#43067#D Patel#Expense#Salary#812### 43040#43054#Mileage#Expense - RW#travel##112#112# 43040#43068#VAT#HMRC#VAT#7603.2### 43070#43080#sjd#Expense#Accountancy#144### 43070#43086#S Patel#Expense#Salary#728### 43070#43086#D Patel#Expense#Salary#812### 43070#43089#XMAS#Expense#Entertainment##300##300 43070#43084#milage#Expense - RW#travel##128#128# 43101#43110#sjd#Expense#Accountancy#144### 43101#43116#SP Div 30750...