首页 > 代码库 > 2016/11/16 周三 <Web SQL Database基本使用方法（入门） >

2016/11/16 周三 <Web SQL Database基本使用方法（入门） >

2024-08-21 08:48:21   236人阅读

<!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基本使用方法（入门） >


联系
我们