从数据表里删除数据,可以执行 DELETE … 更新数据表里的内容,可以使用 UPDATE … 我们先去给输出的每条笔记的添加一个 删除按钮,还有一个 编辑按钮 …
这两个按钮的样式是 bootstrap 的 button group 组件 … 所以 … 需要一些额外的标签 …
"<div class='btn-group btn-group-xs pull-right'>" +
"<button class='btn btn-default' onclick='deleteNote(" + noteEntry.id + ")'>" +
"删除" +
"</button>" +
"<button class='btn btn-default' onclick='editNote(" + noteEntry.id + ")'>" +
"编辑" +
"</button>" +
"</div>" +
这里我们为 删除 这个按钮添加了一个 onlick 的属性 … 点击这个按钮,会去执行这个属性里面的东西 … 在这里,让它去执行 deleteNote() 函数 …
一会儿,我们再去定义这个函数的功能 …
在执行这个函数的时候 … 给它传递了一个参数 … 这个参数就是当前这个笔记内容的 id 号 … 使用这个笔记的 id 号,我们可以准确的删除当前这条笔记 …
在 编辑 按钮上,也用到了类似的方法 … 不同的是,点击 编辑按钮,执行的是 editNote() 函数 …
deleteNote()
下面去定义这两个函数 …
// 删除笔记
function deleteNote(id) {}
// 编辑笔记
function editNote(id) {}
先去定义一下 deleteNote() 函数 … 这个函数可以接受一个参数 … 这个参数就是笔记的 id … 在它的里面,我们添加一个 transaction() … 然后在这个交易里,去执行 DELETE … 删除的操作 …
这条 SQL 里面的 ? 号,是一个占位符 .. 后面的这个 id ,会去匹配这个占位符 ...
// 删除笔记
function deleteNote(id) {
db.transaction(function(tx) {
tx.executeSql("DELETE FROM note WHERE ID=?",
[id],
onSuccess, onError);
});
}
保存 …. 回到浏览器 … 刷新 …
现在点击笔记后面的这个删除按钮 … 会去执行 deleteNote() 函数 … 执行的时候,会用到当前这条笔记的 id 作为一个参数 …
这样就可以从数据表里面删除掉当前这条笔记的内容了 …