用户登录

从数据表里删除数据,可以执行 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 作为一个参数 …

这样就可以从数据表里面删除掉当前这条笔记的内容了 …

删除笔记内容《 HTML5:Web SQL 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点