HTML5里的Web SQL数据库，内置了SQLite数据库，

对数据库的操作使用executeSql执行增删改查

1. 创建数据库

function creatDatabase(){

      db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);

 }

　

2. 创建表

function createTable(){

	if (db) {

        var strSQL = "create table if not exists StuInfo ";

        strSQL += " (StuID unique,Name text,Sex text,Score int)";

        db.transaction(function(tx) {

            tx.executeSql(strSQL)

        },

        function() {

            console.log("创建表错误");

        },

        function() {

            console.log("创建表成功");

        })

    }

　　

3. 增加数据

function addData() {

    if (db) {

        var strSQL = "insert into StuInfo values";

        strSQL += "(?,?,?,?)";

        db.transaction(function(tx) {

            tx.executeSql(strSQL,[

			    $$("txtStuID").value,$$("txtName").value,

			    $$("selSex").value,$$("txtScore").value

			],

			function(){

				$$("txtName").value="";

	            $$("txtScore").value="";

			    alert("成功增加1条记录!");

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

}

　

4. 查询数据

function queryData(){

    if(db){

        var sql = "select * from StuInfo";

         db.transaction(function(tx) {

            tx.executeSql(sql,[],

			function(tx, results){

				var len = results.rows.length,i;

				var htmlData = "";

				for(i = 0; i < len; i++){

				    var item = results.rows.item(i);

				    var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;

				    htmlData += htmlitem + "</br> ";

				}

				$$("info").innerHTML = htmlData;

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

}

　　

5. 删除数据

function deleteData(){

    if (db) {

        var strSQL = "delete from StuInfo where StuID = ?";

        db.transaction(function(tx) {

            tx.executeSql(strSQL,[

			    $$("txtStuID").value

			],

			function(){

			    alert("成功删除1条记录!");

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

     queryData();

}

　　

完整的Code如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="format-detection" content="telephone=no" />

    <meta name="msapplication-tap-highlight" content="no" />

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>

    <script  type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="cordova.js" ></script>

    <title>Hello World</title>

<script type="text/javascript" charset="utf-8">

function $$(id) {

    return document.getElementById(id);

}

        var db;

        document.addEventListener('deviceready', onDeviceReady, false);

        function onDeviceReady(){

            var db = creatDatabase();

            createTable();

            queryData();

        }

 function creatDatabase(){

      db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);

 }

 function createTable(){

	if (db) {

        var strSQL = "create table if not exists StuInfo ";

        strSQL += " (StuID unique,Name text,Sex text,Score int)";

        db.transaction(function(tx) {

            tx.executeSql(strSQL)

        },

        function() {

            console.log("创建表错误");

        },

        function() {

            console.log("创建表成功");

        })

    }

}

function addData() {

    if (db) {

        var strSQL = "insert into StuInfo values";

        strSQL += "(?,?,?,?)";

        db.transaction(function(tx) {

            tx.executeSql(strSQL,[

			    $$("txtStuID").value,$$("txtName").value,

			    $$("selSex").value,$$("txtScore").value

			],

			function(){

				$$("txtName").value="";

	            $$("txtScore").value="";

			    alert("成功增加1条记录!");

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

    queryData();

}

function queryData(){

    if(db){

        var sql = "select * from StuInfo";

         db.transaction(function(tx) {

            tx.executeSql(sql,[],

			function(tx, results){

				var len = results.rows.length,i;

				var htmlData = "";

				for(i = 0; i < len; i++){

				    var item = results.rows.item(i);

				    var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;

				    htmlData += htmlitem + "</br> ";

				}

				$$("info").innerHTML = htmlData;

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

}

function deleteData(){

    if (db) {

        var strSQL = "delete from StuInfo where StuID = ?";

        db.transaction(function(tx) {

            tx.executeSql(strSQL,[

			    $$("txtStuID").value

			],

			function(){

			    alert("成功删除1条记录!");

			},

			function(tx,ex){

			     console.log(ex.message)

			})

        })

    }

     queryData();

}

    </script>

</head>

<body>

<div id="page1" data-role="page" data-add-back-btn="true">

    <div data-role="content">

        <fieldset>

            <legend>新增学生资料</legend>

            <span class="spanl">

            学号：<input type="text" id="txtStuID" size="10"><br>

            姓名：<input type="text" id="txtName"  size="15">

            </span>

            <span>

            性别：<select id="selSex">

              <option value="男">男</option>

              <option value="女">女</option>

            </select><br>

            总分：<input type="text" id="txtScore"  size="8">

            </span>

            <p class="btn">

                <input id="btnAdd" type="button" value="提交"  onClick="addData();">

            </p>

        </fieldset>

        <p id="info">显示结果</p>

        <input  type="button" value="删除记录"  onClick="deleteData();">

    </div>

</div>

</body>

</html>

　　

PhoneGap下Web SQL实践的更多相关文章

  1. Phonegap下localStorage使用实践

    HTML5的Web Storage API提供了两种客户端存储数据的方法 localStorage和sessionStorage. localStorage没有时间限制,程序升级也不会消失,可以满足持 ...

  2. Java JDBC下执行SQL的不同方式、参数化预编译防御

    相关学习资料 http://zh.wikipedia.org/wiki/Java数据库连接 http://lavasoft.blog.51cto.com/62575/20588 http://blog ...

  3. 20155326《网路对抗》Exp8 WEB基础实践

    20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...

  4. 20145236《网络对抗》Exp8 WEB基础实践

    20145236<网路对抗>Exp8 WEB基础实践 一.基础问题回答 什么是表单 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框. ...

  5. 20155206 Exp8 WEB基础实践

    20155206 Exp8 WEB基础实践 基础问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以 ...

  6. 20155210 Exp8 WEB基础实践

    Exp8 WEB基础实践 Apache环境配置 apache是kali下的web服务器,通过访问ip地址+端口号+文件名称可以打开对应的网页. 输入命令vi /etc/apache2/ports.co ...

  7. 20155216 Exp8 WEB基础实践

    Exp8 WEB基础实践 实践内容 Apache环境配置 apache是kali下的web服务器,通过访问 ip地址+端口号+文件名称 打开对应的网页. 输入命令 vi /etc/apache2/po ...

  8. 20155223 Exp8 WEB基础实践

    20155223 Exp8 WEB基础实践 基础问题回答 什么是表单? 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使 ...

  9. 20155317王新玮《网络对抗技术》实验8 WEB基础实践

    20155317王新玮<网络对抗技术>实验8 WEB基础实践 一.实验准备 1.0 实验目标和内容 Web前端HTML.能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...

随机推荐

  1. 来自MSDN的RibbonGadgets练习

    来自MSDN的RibbonGadgets练习 RibbonGadgets是少见的来自官方的资源. 如果选择Menu Items = 集合,则会有向下的小箭头,同时会出现下来菜单. 这个都关系叫做gal ...

  2. libcurl开源库在Win7 + VS2012环境下编译、配置详解 以及下载文件并显示下载进度 demo(转载)

    转载:http://blog.csdn.net/fengshuiyue/article/details/39530093(基本教程) 转载:https://my.oschina.net/u/14207 ...

  3. 内核加载模块时出现Unknown symbol等提示

    一.背景 1.更改了内核的配置,重新编译了内核 2.未重新编译内核模块 3.板子上只更新了内核,并未更新文件系统 二.分析 发现是在加载内核模块时出现Unknown symbol等信息,恰逢当时只更新 ...

  4. class文件的结构

    任何一个class文件都对应着唯一一个类或接口的定义信息,但反过来说,类或接口的定义信息并不一定都在文件里(比如类或接口也可以通过类加载器直接生成) class文件是一组以8位字节为基础单位的二进制流 ...

  5. POJ 2391 Ombrophobic Bovines（二分+拆点+最大流）

    http://poj.org/problem?id=2391 题意: 给定一个无向图,点i处有Ai头牛,点i处的牛棚能容纳Bi头牛,求一个最短时间T,使得在T时间内所有的牛都能进到某一牛棚里去. 思路 ...

  6. 对CCLE数据库可以做的分析--转载

    转载:http://www.bio-info-trainee.com/1327.html 收集了那么多的癌症细胞系的表达数据,拷贝数变异数据,突变数据,总不能放着让它发霉吧! 这些数据可以利用的地方非 ...

  7. 添加 LogCat 到Eclipse

    当你第一次在 Eclipse 中运行 Android 项目的时候,Eclipse 会提醒你一次是否要添加 LogCat 这个工具. 如果你现在还没有添加上的话,我这里教你一下如何手动添加 LogCat ...

  8. 学习gulpfile.babel.js随笔

    'use strict' import gulp from 'gulp' //将gulp插件包含进来 import sass from 'gulp-sass' //编译sass文件 import im ...

  9. bzoj2120: 数颜色 带修莫队

    墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P ...

  10. jspf、jsp小记

    jsp页面: