编辑笔记的流程大体是这样的 … 点击 编辑 按钮 … 把当前这条笔记的内容添加到页面的文本区域上面 … 然后 提交 按钮，会变成 更新 按钮 …
点击 更新 .. 可以把修改之后的笔记内容更新到数据表里 … 下面，我们就一步一步的去实现这个编辑的功能 …
// 编辑笔记
function editNote(id) {
db.readTransaction(function(tx) {
tx.executeSql("SELECT * FROM note WHERE id=?", [id], function(tx, rs){
noteForm.elements["note-content"].value = rs.rows.item(0).note_content;
noteForm.elements["submit-btn"].value = "update";
noteForm.elements["submit-btn"].innerHTML = "更新";
noteForm.elements["note-id"].value = id;
});
});
}
打开 script.js … 先去定义一下 editNote() 这个函数 … 这个函数有一个参数 … 就是 笔记的 id 号 …
在函数里面，先添加一个 transaction() ，然后在里面找到对应 id 的笔记的内容 … 在这个 transaction() 里面，只有选择数据的动作 … 没有写入数据的动作 …
所以，我们可以使用 readTransaction() ...
tx.executeSql 执行 SQL … "SELECT * FROM note WHERE id=?", [id]
使用一个 ? 号 … 用后面的 id 去匹配这个 ? 号 ..
执行成功以后 .. 调用第三个参数 .. 这里我们直接使用一个匿名函数，去定义一下成功以后要做的事情 …
把找到的笔记内容添加到提交笔记的文本区域里面 …
重新再设置一下 提交 按钮的值 … 默认这个按钮的值是 submit … 点击编辑的时候 … 把它的值设置成 update …
这样在点击这个按钮以后，我们可以先做一个判断 … 如果按钮的值是 submit .. 那么点击以后会提交新的笔记 … 如果是 update 的话 … 就去更新当前这条笔记的内容 …
再设置一下按钮上的文字 … 改成 更新 ..
最后想要更新笔记的话，我们得知道这条笔记的 id … 这里我们用的是一个隐藏的文本框 … （index.html）
就是这个 note-id … 默认它的值是 0 …. （script.js）
用户点击 编辑 按钮以后，我们可以把用户想要编辑的笔记的 id ，作为这个隐藏的文本框的值 … 这样在 点击 更新 按钮以后 .. 可以利用这个文本框里的值 … 也就是 笔记 的 id … 去更新对应的笔记的内容 …
submitNote()
最后，我们得去再重新定义一下 submitNote() … 就是点击 提交 按钮以后做的事 … 用一个 if … else … 去判断一下 提交 按钮的值 …
先得到这个按钮的值 … 然后再获取到那个隐藏的文本框里的值 ..
// 得到 提交 按钮的值
var status = noteForm.elements["submit-btn"].value;
// 得到隐藏文本框 note-id 里面的值
var note_id = noteForm.elements["note-id"].value;
在下面，再输入一个 if … 如果 status 等于 submit … 就去执行插入笔记内容到数据库的动作 …
else … 如果提交按钮的值不是 submit … 那应该就是 update … 要做的事就是去更新笔记内容 …
// 判断 提交 按钮的状态
if( status === "submit"){
// 如果是 submit 那么就添加内容到数据表
db.transaction(function(tx) {
tx.executeSql("INSERT INTO note (note_content, note_date) VALUES (?, DATETIME('now', 'localtime'))",
[noteContent],
onSuccess, onError);
});
}else{
// 如果是 update 那么就更新内容到数据表
db.transaction(function(tx) {
tx.executeSql("UPDATE note SET note_content = ? WHERE id=?",
[noteContent, note_id],
onSuccess, onError);
});
}
注意这里的 note_content 笔记的内容，是来自 文本区域 … 后面的 note_id … 是来自那个隐藏的文本框 …
保存 … 回到浏览器 … 刷新 ….
找到一条笔记 … 点击 编辑 …
然后在文本区域里去编辑笔记的内容 … 提交按钮会变成更新按钮 … 点击 更新 … 可以把修改之后的内容更新到数据库里面 …
