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 数 ...
随机推荐
- 记录NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END。
Nonnull区域设置(Audited Regions) 如果需要每个属性或每个方法都去指定nonnull和nullable,是一件非常繁琐的事.苹果为了减轻我们的工作量,专门提供了两个宏:NS_AS ...
- RakNet发送与接收数据
http://www.jenkinssoftware.com/raknet/manual/creatingpackets.html Creating Packets with Bitstreams W ...
- 3ds max旋转简化后模型
简化后的模型无法与原场景直接匹配,因此需要以下步骤: 简化后的模型导入,原点在右上角 旋转后,方法是选中所有模型,右键->旋转 在偏移的x和y各输入180 还有做一些平移,微调 在导入整个she ...
- 【转】代码中特殊的注释技术——TODO、FIXME和XXX的用处
(转自:http://blog.csdn.net/reille/article/details/7161942) 作者:reille 本博客网址:http://blog.csdn.net/reille ...
- hdu 5901 count prime & code vs 3223 素数密度
hdu5901题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5901 code vs 3223题目链接:http://codevs.cn/problem ...
- Trick蠕虫病毒来袭！幕后主使竟是一名高中生“黑客”！
黑客一直是美国电影中的重要元素,很多经典大片中都有黑客的身影,如战争游戏.黑客帝国等.电影中黑客总是神通广大.行侠仗义,<战争游戏>中的年轻黑客大卫•莱特曼利用黑客技术避免引爆核武器,&l ...
- Win10 UI入门RelativePanel(2)
自适应 1) Gif: 添加动画 2)
- Android 登录界面与首页的设计
全屏效果 //取消标题,取消状态栏 this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(Wind ...
- jquery lazyload延迟加载技术的实现原理分析
懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网 ...
- WebADNuke整理
在webconfig上增添 <webadnuke> <database> <add name="SqlDbProvider" type="C ...