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 数 ...
随机推荐
- cnentos中进行bond网卡配置，一切配置无问题，就是ping不通宿主机
服务器网口绑定 1. ifcfg-bond0 DEVICE=bond0 ONBOOT=yes IPADDR=192.168.100.64 NETMASK=255.255.255.0 2. ...
- iOS 对象和json互相转换
// 将字典或者数组转化为JSON串 - (NSData *)toJSONData:(id)theData { NSError *error = nil; NSData *jsonData = [NS ...
- node的核心模块path
//导入模块path var path=require("path"); //path.basename :输出文件名+后缀 //console.log(path.basename ...
- 关于 Java(TM) Platform SE binary 已停止工作 的解决方法
一.问题描述 昨天晚上Myeclipse还用着好好的,今天早上打开工程,只要运行就卡住,大半天弹出个消息窗口:Java(TM) Platform SE binary 已停止工作. 如图 关闭Myecl ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- ubuntu 14.04下spark简易安装
java安装 首先需要上oracle的网站下载 在lib目录下建立一个jvm文件夹 sudo mkdir /usr/lib/jvm 然后解压文件到这个文件夹 sudo tar zxvf jdk-8u4 ...
- Flash: An Efficient and Portable Web Server
Introduction This paper presents the design of a new Web server architecture called the asymmetric m ...
- linux man的使用
在Linux中无论是管理系统还是在Linux环境下编程,内嵌的手册man都是一个很好用的工具,“Linux下不懂得就找man”(man是manual的意思).本文将介绍我所知道的所有关于man的知识( ...
- dedecms 采集规则过滤与替换
过滤与替换常用操作:点击"常用规则",选择要过滤的代码段,再编辑成我们需要的.如果会文章简单采集了,接下来就需要过滤掉采集内容中的广告和链接及其它代码.一般的写法是{dede:tr ...
- 【C++设计模式】单件类与DCLP(Double Check Lock Pattern)的风险
[单件类] 保证只能有一个实例化对象,并提供全局的访问入口. [设计注意事项] 1.阻止所有实例化的方法: private 修饰构造函数,赋值构造函数,赋值拷贝函数. 2.定义单实例化对象的方法: a ...