<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
var firstNameBox = null;
var lastNameBox = null;
var db = null;
var dataTable = null;
/** Called when phonegap javascript is loaded */
function onDeviceReady() {
var addButton = document.getElementById("add");
firstNameBox = document.getElementById("firstName");
lastNameBox = document.getElementById("lastName");
dataTable = document.getElementById("data-table");
db = window.openDatabase("scontactDB", "1.0", "Contacts Database", 1000); //name,version,display name, size
addButton.addEventListener(
"click",
function () {
db.transaction(
//function sql statements
function (tx) {
ensureTableExists(tx);
var firstName = firstNameBox.value;
var lastName = lastNameBox.value;
var sql = 'INSERT INTO Contacts (firstName, lastName) VALUES ("' + firstName + '","' + lastName + '")';
tx.executeSql(sql);
},
function (err) {
alert("error callback " + err.code);
},
function (err) {
alert("success callback " + err.code);
loadFromDB();
});
},
false);
loadFromDB();
}
function loadFromDB() {
db.transaction(
function (tx) {
ensureTableExists(tx);
tx.executeSql('SELECT * FROM Contacts', [],
function (tx, results) {
var htmlStr = "";
for (var index = 0; index < results.rows.length; index++) {
var item = results.rows.item(index);
htmlStr = htmlStr + "<tr><td>" + item.firstName + "</td><td>" + item.lastName + "</td><td><button onclick=\"deleteEntry('" + item.id + "');\">X</button></td></tr>";
}
dataTable.innerHTML = htmlStr;
},
function (err) {
alert("Unable to fetch result from Contacts Table");
});
},
function (err) {
alert("error callback " + err.code + " " + err.message);
},
function () {
firstNameBox.value = "";
lastNameBox.value = "";
});
}
function deleteEntry(id) {
db.transaction(
function (tx) {
ensureTableExists(tx);
tx.executeSql('Delete FROM Contacts where id=' + id);
},
function (err) {
alert("error callback " + err.code + " " + err.message);
},
function (err) {
alert("success callback ");
loadFromDB();
});
}
function ensureTableExists(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY, firstName,lastName)');
}
/** Called when browser load this page*/
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
<body onLoad="init()">
<table border="1">
<tr>
<td><b>First Name</b>
</td>
<td><b>Last Name</b>
</td>
<td><b>Action</b>
</td>
</tr>
</table>
<table id="data-table"></table>
<table>
<tr>
<td>
<input id="firstName" type="text">
</td>
<td>
<input id="lastName" type="text">
</td>
<td>
<button id="add">Add</button>
</td>
</tr>
</table>
</body>
我对电话间隙完全陌生；这是我的 index.html 文件。我不知道错误在哪里我需要检查值是否存储到数据库中。请帮忙