<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>測試</title>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header" id="header_top">
<p class="text_center">資料庫測試</p>
</div>
<div data-role="content">
<div>
<button id="Btn01" ><h4>測試新增資料</h4></button>
<button id="Btn02" ><h4>資料顯示</h4></button>
<button id="Btn03" ><h4>刪除全部資料</h4></button>
</div>
<br />
<br />
<div>
<ul id="list01" data-role="listview">
</ul>
</div>
</div>
<div data-role="footer" id="footer_down">
<p class="text_center">0.1 alpha</p>
</div>
</div>
</body>
</html>
<!-- 引入必要的函式庫 -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" type="text/css" href="css/customer.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
//產生新的Sqlite DB或連線到Sqlite DB，返回database object
function getDb(){
return window.openDatabase("testdb","1.0","This is Test DB" ,10000);
}
function fun_DB(e){
//下列被註解的語法在第二次執行時會錯誤，因為表格已被建立，所以要加上if not exists
//e.executeSql('create table demo01 (id unique,name,access)');
e.executeSql('create table if not exists demo01 (id,name,access)');
}
function error_DB(err) {
alert("錯誤了啦！" + err + "-- Code: " + err.code);
}
function success_DB() {
alert("成功了");
}
//查詢成功的話會回傳資料，如下以陣列變數results來接收
function querySuccess(tx,results){
var len = results.rows.length;
var i = 0 ;
alert(len);
//先清除網頁上的資料，.html會覆蓋原有的HTML語法
$("#list01").html("");
for (i=0; i<len; i++) {
//.append會將HTML語法附加到原有語法的後面
//results.rows.item(i).name的name是表格的欄位名稱
$("#list01").append("<li>" + results.rows.item(i).name + "</li>");
}
}
$(document).ready(function(){
//取得Sqlite DB object
var objdb= getDb();
//執行DB的transactiion
//第一個參數是執行的function，第二個參數是執行失敗的function，第三個參數是執行成功的function
objdb.transaction(fun_DB,error_DB,success_DB);
$("#Btn01").click(function(){
var db1 = getDb();
var v_id=1;
var v_name="John";
//[]內是要代入SQL中變數的值，SQL中的變數用「?」表示，
//所以最後的SQL是insert into demo01 values(1,John,"b")
db1.transaction(function(tx){
tx.executeSql('insert into demo01 values(?,?,"b")',[v_id,v_name]);
},error_DB,success_DB
);
});
$("#Btn02").click(function(){
var db1=getDb();
db1.transaction(
function(tx){
//[]是指要代入SQL的變數，例如：
//'select * from demo01 where id=? and name =? ',[myid,myname]
//querySuccess是執行Select成功後的function
tx.executeSql('select * from demo01',[],querySuccess,error_DB);
}
);
});
$("#Btn03").click(function(){
var db1=getDb();
db1.transaction(
function(tx) {
tx.executeSql('delete from demo01') ;
},error_DB,success_DB
);
});
});
</script>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>測試</title>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header" id="header_top">
<p class="text_center">資料庫測試</p>
</div>
<div data-role="content">
<div>
<button id="Btn01" ><h4>測試新增資料</h4></button>
<button id="Btn02" ><h4>資料顯示</h4></button>
<button id="Btn03" ><h4>刪除全部資料</h4></button>
</div>
<br />
<br />
<div>
<ul id="list01" data-role="listview">
</ul>
</div>
</div>
<div data-role="footer" id="footer_down">
<p class="text_center">0.1 alpha</p>
</div>
</div>
</body>
</html>
<!-- 引入必要的函式庫 -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" type="text/css" href="css/customer.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
//產生新的Sqlite DB或連線到Sqlite DB，返回database object
function getDb(){
return window.openDatabase("testdb","1.0","This is Test DB" ,10000);
}
function fun_DB(e){
//下列被註解的語法在第二次執行時會錯誤，因為表格已被建立，所以要加上if not exists
//e.executeSql('create table demo01 (id unique,name,access)');
e.executeSql('create table if not exists demo01 (id,name,access)');
}
function error_DB(err) {
alert("錯誤了啦！" + err + "-- Code: " + err.code);
}
function success_DB() {
alert("成功了");
}
//查詢成功的話會回傳資料，如下以陣列變數results來接收
function querySuccess(tx,results){
var len = results.rows.length;
var i = 0 ;
alert(len);
//先清除網頁上的資料，.html會覆蓋原有的HTML語法
$("#list01").html("");
for (i=0; i<len; i++) {
//.append會將HTML語法附加到原有語法的後面
//results.rows.item(i).name的name是表格的欄位名稱
$("#list01").append("<li>" + results.rows.item(i).name + "</li>");
}
}
$(document).ready(function(){
//取得Sqlite DB object
var objdb= getDb();
//執行DB的transactiion
//第一個參數是執行的function，第二個參數是執行失敗的function，第三個參數是執行成功的function
objdb.transaction(fun_DB,error_DB,success_DB);
$("#Btn01").click(function(){
var db1 = getDb();
var v_id=1;
var v_name="John";
//[]內是要代入SQL中變數的值，SQL中的變數用「?」表示，
//所以最後的SQL是insert into demo01 values(1,John,"b")
db1.transaction(function(tx){
tx.executeSql('insert into demo01 values(?,?,"b")',[v_id,v_name]);
},error_DB,success_DB
);
});
$("#Btn02").click(function(){
var db1=getDb();
db1.transaction(
function(tx){
//[]是指要代入SQL的變數，例如：
//'select * from demo01 where id=? and name =? ',[myid,myname]
//querySuccess是執行Select成功後的function
tx.executeSql('select * from demo01',[],querySuccess,error_DB);
}
);
});
$("#Btn03").click(function(){
var db1=getDb();
db1.transaction(
function(tx) {
tx.executeSql('delete from demo01') ;
},error_DB,success_DB
);
});
});
</script>
