基于 cordova实现一个有修改按钮的页面,点击修改按钮后跳出提示窗口输入编号后在跳出SQlite表中编号是输入的编号的记录的姓名,密码,类型,生日这4个信息可以用来修改,修改完成后存回表中
时间: 2024-02-16 22:59:38 浏览: 93
首先,需要安装 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 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("name").value = name;
document.getElementById("password").value = password;
document.getElementById("type").value = type;
document.getElementById("birthday").value = birthday;
} else {
// 如果没有记录,提示用户
alert("找不到编号为 " + id + " 的记录!");
}
});
});
}
}
// 点击保存按钮时触发的函数
function save() {
var id = prompt("请输入编号:"); // 弹出提示窗口输入编号
if (id != null && id != "") {
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("修改成功!");
} else {
alert("找不到编号为 " + id + " 的记录!");
}
});
});
}
}
</script>
</head>
<body>
<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="modify()">修改</button>
<button onclick="save()">保存</button>
</body>
</html>
```
在这个页面中,有一个修改按钮和一个保存按钮。点击修改按钮会弹出提示窗口输入编号,然后查询编号为该值的记录,并显示姓名、密码、类型、生日。用户可以修改这些信息,然后点击保存按钮保存修改后的信息到数据库中。需要注意的是,这里使用了 SQLite 插件提供的接口来访问数据库,具体用法可以参考插件文档。
阅读全文