<!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. CentOS7 安装中文帮助手册

    1.首先确定系统安装中文字体否 locale 2.rpm安装中文帮助手册 挂在光盘 将man-pages-zh-CN-1.5.2-4.el7.noarch.rpm拷贝到本机 rpm -ivh man- ...

  2. Linux下memcache的安装和启动

    memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.据说官方所说,其用户包括twitter.digg.flickr等,都是些互联网大腕呀.目前用memca ...

  3. LeetCode之263. Ugly Number

    ------------------------------------------------------------- 如果一个数的质因子只包括2,3,5,那么这个数n可以表示为:n=2x+3y+ ...

  4. IOS __ 面试题

    1.下面四种内部排序算法中哪一种在最差的情况下时间复杂度最高:(B) A.快速排序 B.冒泡排序 C.堆排序 D.归并排序   2.Shell中,将command1的输出作为command2的输入应该 ...

  5. CSS--实现小三角形

    <style> html, body { margin: 0; padding: 0; } /*下面用CSS3分别实现向上.下.左.右的三角形*/ .btn-color{ color: # ...

  6. fat32转ntfs

    convert c: /fs:ntfs 下了个维基的zim,7G,fat32放不下 :( Microsoft Windows [版本 6.1.7600] 版权所有 (c) 2009 Microsoft ...

  7. SqlLite 基本操作

    1.数据类型 ●  SQLite将数据划分为以下⼏几种存储类型: ●  integer : 整型值 ●  real : 浮点值 ●  text : ⽂文本字符串 ●  blob : ⼆二进制数据(⽐比 ...

  8. Element-ui,Mint-ui

    style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...

  9. NXP恩智浦P89V52X2单片机破解P89C52X2BA芯片解密技术分享！

    NXP恩智浦P89V52X2单片机破解P89C52X2BA芯片解密 P89V52X2是一款带有8kB Flash.256B数据RAM和192B数据EEPROM的80C51微控制器.这个器件可以在完全替 ...

  10. CSS中使用text-transform实现首字母大写

    CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要text-transform属性了. ...