2016/11/16 周三 <Web SQL Database基本使用方法（入门） >
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
</script>
<style type="text/css">
td {
text-align: center;
} a {
cursor: pointer;
font-size: 13px;
} a:hover {
color: red;
} label {
color: red;
font-size: 12px;
}
</style>
</head> <body>
<table id="tabBook" border="1px" cellspacing="0" cellpadding="0">
<tr>
<th width="220px">编号</th>
<th width="220px">书名</th>
<th width="220px">作者</th>
<th width="220px">编辑</th>
</tr>
</table>
<fieldset id="">
<legend>图书信息</legend>
书名：<input type="text" id="txtName" /><br /> 作者：
<input type="text" id="txtAuthor" /><br />
<input type="hidden" name="txthidden" id="txthidden" value="" />
<input type="button" id="btnAdd" onclick="addBook()" value="添加" />
<input type="button" id="btnAdd" onclick="updating()" value="更新" />
</fieldset> <script type="text/javascript">
var db = openDatabase("MyBook", 1.0, "我的图书", 1024 * 1024 * 1024, null, null);
if(db)
log("已创建或已找到数据库！请操作~！"); //加载数据到表格
addTable(); //添加图书信息
function addBook() { var sql = "create table if not exists BookInfo(id integer primary key autoincrement,BookName text,Author text)"; db.transaction(function(tx) {
tx.executeSql(sql);//向数据库添加表
//插入数据
tx.executeSql("insert into BookInfo(BookName,Author) values(?,?)", [$("#txtName").val(), $("#txtAuthor").val()], function(tx, result) {
log("您已添加成功！");
addTable(); //清空文本框
$("#txtName").val("");
$("#txtAuthor").val("");
}, function(tx, error) {
log("很遗憾，添加失败！")
})
});
} // 加载数据到表格
function addTable() { db.transaction(function(tx) {
tx.executeSql(
"select id,BookName,Author from BookInfo", [],
function(tx, rs) {
var len = rs.rows.length;
var tab = $("#tabBook");
var Tr = $("#tabBook tr:first").clone();
tab.empty();
tab.append(Tr);
if(len > 0) {
for(var i = 0; i < len; i++) {
var id = rs.rows.item(i)["id"];
var name = rs.rows.item(i)["BookName"];
var author = rs.rows.item(i)["Author"];
var tr = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + author + "</td><td><a id='" + id + "' onclick='Del(this.id)'>删除</a> | <a id='" + id + "' onclick='Update(this.id)'>修改</a></td></tr>";
$("#tabBook").append(tr);
}
}
},
function(tx, error) {
log("你还未成功添加图书信息！");
});
})
} //删除书籍信息
function Del(aid) { db.transaction(function(tx) { tx.executeSql("delete from BookInfo where id=?", [aid], function(tx, result) {
var al = confirm("确定要删除吗？");
if(al) {
$("#" + aid).closest("tr").remove();
} else {
log("您已取消操作！")
}
}, function(tx, error) {
log("错误：" + error.Message);
});
})
} //将所选书籍信息加载到文本框
function Update(aid) {
var id = $("#" + aid).parent().parent().children("td:eq(0)").text();
var name = $("#" + aid).parent().parent().children("td:eq(1)").text();
var author = $("#" + aid).parent().parent().children("td:eq(2)").text();
$("#txthidden").val(id);
$("#txtName").val(name);
$("#txtAuthor").val(author);
log("请在下面文本框中先修改所选书籍，再点击更新按钮进行修改！")
} //修改所选书籍信息
function updating() {
var id = $("#txthidden").val();
var name = $("#txtName").val();
var author = $("#txtAuthor").val();
db.transaction(function(tx) {
tx.executeSql("update BookInfo set BookName=?,Author=? where id=?", [name, author, id], function(tx, result) {
addTable();
log("数据已更新成功！")
}, function(tx, error) {
log("更新失败，请重试！");
})
})
}
//记录操作步骤
function log(msg) {
var lbl = "<label>" + msg + " </label><br />";
$("body").append(lbl);
}
</script> </body> </html>
--老白菜原创
2016/11/16 周三 <Web SQL Database基本使用方法（入门） >的更多相关文章
- 2016/11/16 周三 <使用LocalStore记住用户密码方法示例>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- html 5 本地数据库（Web Sql Database）核心方法openDatabase、transaction、executeSql 详解
Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...
- HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 前端存储之Web Sql Database
前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...
- HTML5教程之html 5 本地数据库（Web Sql Database）
HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- web sql database数据存储位置
Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...
- 阿伦学习html5 之Web SQL Database
不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...
- 【HTML5】HTML5本地数据库（Web Sql Database）
Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
随机推荐
- 用代码控制鼠标键盘（C#语言）
前些时间想做一个鼠标点击器,用到了这些知识. 下面整理记录一下. ps.感谢各位大神 下面直接上代码 1.鼠标的控制 class MouseMove { #region MouseEvent [Sys ...
- 转 centos虚拟机环境的构建。
转自:http://www.cnblogs.com/xiaoluo501395377/archive/2013/03/31/CentOs.html 一.前言 作为一个想从事j2ee后台开发的程序猿,l ...
- ***IT程序员自我修养和情商提升文章
低情商的13个表现 --------------------------------------------------------------------- — THE END —
- CSV文件分割与列异常处理的python脚本
csv文件通常存在如下问题: 1. 文件过大(需要进行文件分割)2. 列异常(列不一致,如元数据列为10列,但csv文件有些行是11列,或者4列)本脚本用于解决此问题. #coding=utf-8 ' ...
- 【python坑记录】
python的sort函数使用的时候有一个参数cmp.一定注意这里返回值要用1和-1.不能True和False!!!
- 学习微信小程序之css5
文本的装饰(下划线) 文本的位置,缩进
- 【ajax 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
- Unity.Interception（AOP）
在前面我们学习到的是Unity依赖注入(DI)与统一容器来松散耦合,这个设计已经对我们系统带来了很多的好处.但是我们还会想尝试和遵循单一职责,开放封闭原则.比如我们不应该在我们的Bus ...
- [8.3] Magic Index
A magic index in an array A[0...n-1] is defined to be an index such that A[i] = i. Given a sorted ar ...
- 从倒影说起，谈谈 CSS 继承 inherit（转）
从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...