基于 cordova实现一个有插入、查询、修改和删除按钮的页面,点击插入按钮跳转另一页面输入编号,姓名,密码,类型,生日这5个信息后插入SQlite表中后点击确定回到第一个页面,点击查询按钮输出SQlite表,点击修改按钮后跳出提示窗口输入编号后在跳出SQlite表中编号是输入的编号的记录的姓名,密码,类型,生日这4个信息可以用来修改,修改完成后存回表中,点击删除,跳出窗口输入要删除的记录的编号,将此编号的表从SQlite表删除的功能
时间: 2024-01-22 07:03:26 浏览: 67
首先,需要安装 Cordova 平台和 SQLite 插件。可以使用以下命令来安装:
```
cordova platform add android
cordova plugin add cordova-sqlite-storage
```
接下来,可以创建两个 HTML 页面,一个用于插入、查询、修改和删除数据,另一个用于输入数据。代码如下:
第一个页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据管理</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
// 点击插入按钮时跳转到插入页面
function insert() {
window.location.href = "insert.html";
}
// 点击查询按钮时输出表中所有记录
function query() {
var db = window.sqlitePlugin.openDatabase({name: "my.db"}); // 打开数据库
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM mytable", [], function(tx, res) {
// 查询所有记录
var output = "";
for (var i = 0; i < res.rows.length; i++) {
var id = res.rows.item(i).id;
var name = res.rows.item(i).name;
var password = res.rows.item(i).password;
var type = res.rows.item(i).type;
var birthday = res.rows.item(i).birthday;
output += "编号:" + id + ",姓名:" + name + ",密码:" + password + ",类型:" + type + ",生日:" + birthday + "<br>";
}
document.getElementById("output").innerHTML = output;
});
});
}
// 点击修改按钮时跳出提示窗口输入编号后查询对应记录并显示在页面上
function modify() {
var id = prompt("请输入编号:"); // 弹出提示窗口输入编号
if (id != null && id != "") {
var db = window.sqlitePlugin.openDatabase({name: "my.db"}); // 打开数据库
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM mytable WHERE id=?", [id], function(tx, res) {
// 查询编号为 id 的记录
if (res.rows.length > 0) {
// 如果有记录,显示姓名、密码、类型、生日
var name = res.rows.item(0).name;
var password = res.rows.item(0).password;
var type = res.rows.item(0).type;
var birthday = res.rows.item(0).birthday;
document.getElementById("id").value = id;
document.getElementById("name").value = name;
document.getElementById("password").value = password;
document.getElementById("type").value = type;
document.getElementById("birthday").value = birthday;
document.getElementById("save").style.display = "inline"; // 显示保存按钮
} else {
// 如果没有记录,提示用户
alert("找不到编号为 " + id + " 的记录!");
}
});
});
}
}
// 点击保存按钮时将修改后的数据保存到数据库中
function save() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var type = document.getElementById("type").value;
var birthday = document.getElementById("birthday").value;
var db = window.sqlitePlugin.openDatabase({name: "my.db"}); // 打开数据库
db.transaction(function(tx) {
tx.executeSql("UPDATE mytable SET name=?, password=?, type=?, birthday=? WHERE id=?", [name, password, type, birthday, id], function(tx, res) {
// 更新编号为 id 的记录
if (res.rowsAffected > 0) {
alert("修改成功!");
document.getElementById("save").style.display = "none"; // 隐藏保存按钮
query(); // 刷新页面
} else {
alert("找不到编号为 " + id + " 的记录!");
}
});
});
}
// 点击删除按钮时跳出提示窗口输入编号后删除对应记录
function del() {
var id = prompt("请输入编号:"); // 弹出提示窗口输入编号
if (id != null && id != "") {
var db = window.sqlitePlugin.openDatabase({name: "my.db"}); // 打开数据库
db.transaction(function(tx) {
tx.executeSql("DELETE FROM mytable WHERE id=?", [id], function(tx, res) {
// 删除编号为 id 的记录
if (res.rowsAffected > 0) {
alert("删除成功!");
query(); // 刷新页面
} else {
alert("找不到编号为 " + id + " 的记录!");
}
});
});
}
}
</script>
</head>
<body>
<button onclick="insert()">插入</button>
<button onclick="query()">查询</button>
<button onclick="modify()">修改</button>
<button onclick="del()">删除</button>
<br><br>
<div id="output"></div>
<br><br>
<input type="hidden" id="id">
<label for="name">姓名:</label>
<input type="text" id="name"><br>
<label for="password">密码:</label>
<input type="text" id="password"><br>
<label for="type">类型:</label>
<input type="text" id="type"><br>
<label for="birthday">生日:</label>
<input type="text" id="birthday"><br>
<button id="save" style="display: none;" onclick="save()">保存</button>
</body>
</html>
```
第二个页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入数据</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
// 点击确定按钮时将数据插入到数据库中
function insert() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var type = document.getElementById("type").value;
var birthday = document.getElementById("birthday").value;
var db = window.sqlitePlugin.openDatabase({name: "my.db"}); // 打开数据库
db.transaction(function(tx) {
tx.executeSql("INSERT INTO mytable (id, name, password, type, birthday) VALUES (?, ?, ?, ?, ?)", [id, name, password, type, birthday], function(tx, res) {
alert("插入成功!");
window.location.href = "index.html"; // 返回第一个页面
});
});
}
</script>
</head>
<body>
<label for="id">编号:</label>
<input type="text" id="id"><br>
<label for="name">姓名:</label>
<input type="text" id="name"><br>
<label for="password">密码:</label>
<input type="text" id="password"><br>
<label for="type">类型:</label>
<input type="text" id="type"><br>
<label for="birthday">生日:</label>
<input type="text" id="birthday"><br>
<button onclick="insert()">确定</button>
</body>
</html>
```
在这个程序中,第一个页面有插入、查询、修改和删除按钮,点击插入按钮会跳转到第二个页面输入数据并插入到数据库中,点击查询按钮会输出表中所有记录,点击修改按钮会弹出提示窗口输入编号后查询对应记录并显示在页面上,用户可以修改这些信息,然后点击保存按钮保存修改后的信息到数据库中,点击删除按钮会弹出提示窗口输入编号后删除对应记录。需要注意的是,这里使用了 SQLite 插件提供的接口来访问数据库,具体用法可以参考插件文档。
阅读全文