html5 Database使用示例

最新推荐文章于 2021-01-27 00:23:33 发布

himici

最新推荐文章于 2021-01-27 00:23:33 发布

阅读量505

点赞数 2

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/u012184853/article/details/52872205

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一个html5 Database简单使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.1.0.js" type="text/javascript"></script>
    <title>Title</title>
    <script>
        //页面加载完成后绑定页面按钮的点击事件
        $(function () {
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtSex = $("#txtSex").val();
                var txtAge = $("#txtAge").val();
                var db = getCurrentDb();
                db.transaction(function (trans) {
                    trans.executeSql('INSERT INTO STUDENT(NAME,SEX,AGE) VALUES (?,?,?)',[txtName,txtSex,txtAge],
                            function (ts, data) {},function (ts, message) {
                                alert(message);
                            });
                });
                showAllTheData();
            });
        });

        function initDatabase() {
            var db = getCurrentDb(); //init database
            //启动一个事务，并设置回调函数
            db.transaction(function (trans) {
                trans.executeSql('CREATE TABLE IF NOT EXISTS STUDENT(NAME TEXT,SEX TEXT,AGE TEXT)');
            });
        }

        function getCurrentDb() {
            var db = openDatabase('account','1.0','this is account database',1024*1024);
            return db;
        }

        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql('SELECT * FROM STUDENT',[],function (ts, data) {
                    if(data){
                        for(var i=0;i<data.rows.length;i++){
                            appendDataToTable(data.rows.item(i));
                        }
                    }
                },function (ts,message) {
                    alert(message);
                });
            });
        }

        function appendDataToTable(data) {
            var txtName = data.NAME;
            var txtSex = data.SEX;
            var txtAge = data.AGE;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>"+txtSex+"</td>";
            strHtml += "<td>"+txtAge+"</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }

    </script>
</head>
<body>
<br>
<table>
    <tr>
        <td>name：</td>
        <td><input type="text"  id="txtName" required/></td>
    </tr>
    <tr>
        <td>sex：</td>
        <td><input type="text" id="txtSex" required/></td>
    </tr>
    <tr>
        <td>age：</td>
        <td><input type="text" id="txtAge" required/></td>
    </tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所有数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>
</html>

这里写图片描述

himici

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html5 Database使用示例

一个html5 Database简单使用示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="js/jquery-3.1.0.js" type="text/javascript"></script> <title>Title</title> <script>
复制链接

扫一扫