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 数 ...
随机推荐
- nagios检测http
/usr/local/nagios/etc/server/下相应的地址检测加上以下一段 (server下的cfg文件是检测相应服务器的模块) define service{ use ...
- Sqlserver 2008清除数据库日志
USE [master] GO ALTER DATABASE DBNAME SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DBNAME SET ...
- javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure
SSL握手失败:用JDK1.8做发邮件的功能遇到这种问题处理方式是:将目录 %JAVA_HOME%\...\jre\lib\security里的local_policy.jar,US_export_p ...
- mysql主从配置
引言: 双11,阿里云服务器打折,于是我忍不住又买了一台服务器,于是咱也是有两台服务器的爷们了,既然有了两台服务器,那么肯定要好好利用一下吧,那么就来玩玩mysql的主从配置吧. 准备 两台数据库服务 ...
- 手把手教你玩转nginx负载均衡（四）--源码安装nginx
引言: 在上一篇,我们已经装好了虚拟机,并且已经配置好了网络,那么今天我们就要开始安装nginx服务器了. 安装工具以及过程 安装gcc编译套件以及nginx依赖模块 yum -y install g ...
- [Unity3D]自制UnityForAndroid二维码扫描插件
一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...
- Express URL跳转（重定向）的实现
Express URL跳转(重定向)的实现 Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- View动画和属性动画
在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...
- c语言结构体
[C语言]21-结构体 本文目录 一.什么是结构体 二.结构体的定义 三.结构体变量的定义 四.结构体的注意点 五.结构体的初始化 六.结构体的使用 七.结构体数组 八.结构体作为函数参数 九.指向结 ...