<!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="添加" />&nbsp;&nbsp;&nbsp;
<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>&nbsp;|&nbsp;<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基本使用方法(入门) >的更多相关文章

  1. 2016/11/16 周三 <使用LocalStore记住用户密码方法示例>

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. html 5 本地数据库(Web Sql Database)核心方法openDatabase、transaction、executeSql 详解

    Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...

  3. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  4. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

  5. HTML5教程之html 5 本地数据库(Web Sql Database)

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  6. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  7. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

  8. 阿伦学习html5 之Web SQL Database

    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...

  9. 【HTML5】HTML5本地数据库(Web Sql Database)

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

随机推荐

  1. php学习中——知识点(1)

    php是嵌入式脚本语言(意义也就不言而喻) 标识:<?php ....  ?>         输出:echo "**"; 使用美元符号($)后跟变量名表示变量,区分大 ...

  2. luac++

    Cocos2d-x下Lua调用自定义C++类和函数的最佳实践 洪亮 305 2014年08月09日 发布   1 推荐 21 收藏,14.9k 浏览 关于cocos2d-x下Lua调用C++的文档看了 ...

  3. C# winform 跨线程更改窗体控件的属性

    当winform程序中新开一个线程,是无法改变主线程中窗体控件的属性的,否则运行时会报错. 若想在其他线程中控制主线程中的窗体控件,则必须利用BeginInvoke方法. 例如:添加一个名为textb ...

  4. MysqlNDB集群配置

    为了避免不必要的资源分配,默认情况下是不启动ndbcluster引擎.

  5. WordPress一键部署网站

    每个人心里都有一个建站梦,所以今天作为我第一篇文章,就给大家圆了这场梦. 今天我来详细的一步一步带领大家利用WordPress程序来建立自己的小站以及解决直接域名访问(本地安装wordpress请阅读 ...

  6. Python 修改电脑DNS

    Pc电脑一般连网都是动态DHCP获取局域的IP地址,而且DNS服务器为自动获取地址.要修改DNS就要打开本地网络-本地连接- 属性- TCP/IP 手动修改DNS. 其实Python也可以通过WMI接 ...

  7. python学习笔记-进程线程

    1.什么是进程(process)? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述 ...

  8. 3.4.4 数据预留和对齐(skb_reserve, skb_push, skb_put, skb_pull)

    转自:http://book.51cto.com/art/201206/345043.htm <Linux内核源码剖析:TCP/IP实现>本书详细论述了Linux内核2.6.20版本中TC ...

  9. 第三十三篇:使用uiresImporter生成uires.idx及skin.xml

    在SOUI中,使用uires.idx这个文件来记录程序中使用的所有资源文件. 此外绘制对象(ISkinObj)则一般放在skin.xml中描述. 要向一个界面中增加一个新的图片,在没有uiresImp ...

  10. C# 通过模拟http请求来调用soap、wsdl

    C#调用webservice的方法很多,我说的这种通过http请求模拟来调用的方式是为了解决C#调用java的远程API出现各种不兼容问题. 由于远程API不在我们的控制下,我们只能修改本地的调用代码 ...