種子論壇 | 高雄市資訊培育協會學員討論區

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<title>工作小幫手</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>工作小幫手</h1>
</div>
<div data-role="content">
<input type="hidden" id="id" />
工作標題:<input type="text" id="title"/><br/>
完成期限:<input type="date" id="deadline"/><br/>
工作內容:<input type="text" id="content"/><br/>
工作地點:<input type="text" id="address"/><br/>
<div id="map_canvas" style="width:300px;height:200px;">
</div>
<button onclick="resetForm();">清除重來</button>
<button onclick="updateRecord();">修改工作</button>
<button onclick="insertRecord();">新增工作</button>
<button onclick="dropTable()">全部清除</button>
</div>
<div data-role="content">工作列表：</div>
<div data-role="content" id="results"></div>
</div>
</body>
<script>
var results = $("#results");
var id = $("#id");
var title = $("#title");
var deadline = $("#deadline");
var content = $("#content");
var address = $("#address");
var creatStatement = new Array();
creatStatement[0] = "create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)";
creatStatement[1] = "alter table MyTaskTB add address text";
/*
var creatStatement = [
"create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)"
,"alter table MyTaskTB add address text"
];
*/
var selectAllStatement = "select * from MyTaskTB order by deadline";
var insertStatement = "insert into MyTaskTB(title,deadline,content,address)values(?,?,?,?)";
var updateStatement = "update MyTaskTB set title=?,deadline=?,content=?,address=? where id=?";
var deleteStatement = "delete from MyTaskTB where id=?";
var dropStatement = "drop table MyTaskTB";
var db = openDatabase("TaskDB","1.0","TaskDB",200000);
var dataset;
createTable();
drawHereMap();
function createTable()
{
db.transaction(function(tx){
for(var i = 0;i < creatStatement.length;i++)
{
tx.executeSql(creatStatement[i],[],null,onError);
}
});
showRecords();
}
function showRecords()
{
var show = ""; //results.innerHTML = "";
db.transaction(function(tx){
tx.executeSql(selectAllStatement,[],function(tx,result){
dataset = result.rows;
show = "<ul data-role='listview' data-insert='true' data-filter='true'>\n";
for(var i = 0,item = null;i < dataset.length;i++)
{
item = dataset.item(i);
show += "<li>"+item['title']+"<button onclick='loadRecord("+i+");'>編輯</button><button onclick='deleteRecord("+item['id']+")'>刪除</button></li>";
}
show += "</ul>";
results.html(show);
},onError);
});
}
function onError(tx,error)
{
alert(error.message);
}
function resetForm()
{
id.val("");
title.val("");
deadline.val("");
content.val("");
address.val("");
}
function insertRecord()
{
db.transaction(function(tx){
tx.executeSql(insertStatement,[title.val(),deadline.val(),content.val(),address.val()],loadAndReset,onError);
});
}
function loadAndReset()
{
resetForm();
showRecords();
}
function loadRecord(idx)
{
var item = dataset.item(idx);
id.val(item["id"]); //id.value=""
title.val(item["title"]);
deadline.val(item["deadline"]);
content.val(item["content"]);
address.val(item["address"]);
}
function updateRecord()
{
function doUpdate(tx)
{
tx.executeSql(updateStatement,[title.val(),deadline.val(),content.val(),address.val(),id.val()],loadAndReset,onError);
}
db.transaction(doUpdate);
}
function deleteRecord(idx)
{
db.transaction(function(tx){
tx.executeSql(deleteStatement,[idx],loadAndReset,onError);
});
}
function dropTable()
{
resetForm();
db.transaction(function(tx){
tx.executeSql(dropStatement,[],createTable,onError);
});
}
function drawMap(lat,log)
{
var showMap = "<img width='300' height='200' src='http://maps.google.com/maps/api/staticmap?center="+lat+","+log+"&markers=size:small|color:blue|"+lat+","+log+"&zoom=16&size=300x200&sensor=false'/>";
map_canvas.innerHTML = showMap;
}
function drawHereMap()
{
var option =
{
enableHighAccuracy:false,
maximumAge:10000,
timeout:5000
};
/* 產生物件的另外一種寫法:
var option = new Object();
option.enableHighAccuracy=false;
option.maximumAge=10000;
option.timeout=5000;
*/
function successHandle(location)
{
drawMap(location.coords.latitude,location.coords.longitude);
}
function errorHandle(error)
{
alert("定位失敗:"+error.message);
}
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(successHandle,errorHandle,option);
}
else
{
alert("您的瀏覽器不支援HTML5定位!");
}
}
</script>
</html>

複製代碼