jquery

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

web sql database

419

JQUERY

// works in chrome, opera, safari
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {

$("#btn_create").click(function () {
var db = null;
db = window.openDatabase("MyDb", "1.0", "my database", 1024 * 1024 * 3);

db.transaction(function (tx) {

// create the table
tx.executeSql(
"CREATE TABLE MYTABLE (id INTEGER, country VARCHAR(255), city VARCHAR(255))", [],
function () { $("#output1").text("table has been sucessfully created!"); },
function (tx, error) { $("#output1").text(error.message); });
});
});

// insert the records

$("#btn_insert").click(function () {
var id = $("#id").text();
var country = $("#country").text();
var city = $("#city").text();

var db=null;
db = window.openDatabase("MyDb", "1.0", "my database", 1024*1024*3);

db.transaction(function(tx){

tx.executeSql(
"INSERT INTO MYTABLE (id, country, city) VALUES (?,?,?)", [id,country,city],
function(){$("#output2").text("record has been sucessfully inserted!");},
function(tx, error){$("#output2").text(error.message);});
});
});

// read the records
$("#btn_read").click(function () {
var db = null;
db = window.openDatabase("MyDb", "1.0", "my database", 1024 * 1024 * 3);

db.transaction(function (tx) {

tx.executeSql("SELECT id, country, city FROM MYTABLE", [],
function (SQLTransaction, data) {
for (var i = 0; i < data.rows.length; i++) {
var row = data.rows.item(i);
alert(row["id"]);
alert(row["country"]);
alert(row["city"]);
}

});
});

});

// drop the table
$("#btn_remove").click(function () {
var db = null;
db = window.openDatabase("MyDb", "1.0", "my database", 1024 * 1024 * 3);

db.transaction(function (tx) {

tx.executeSql("DROP table MYTABLE", [],
function () { $("#output3").text("table has been sucessfully removed!"); },
function (tx, error) { $("#output3").text(error.message); });

});
});
});
</script>

<div id="id">1</div></br>
<div id="country">USA</div></br>
<div id="city">San Diego</div></br>
<div id="output1"></div></br>
<div id="output2"></div></br>
<div id="output3"></div></p>

<button id="btn_create">create table</button>
<button id="btn_insert">insert record</button>
<button id="btn_read">read record</button>
<button id="btn_remove">remove table</button>

</body>
</html>