H5操作WebSQL数据库

HTML代码：

<!DOCTYPE html>

<html>

	<head lang="en">

		<meta charset="UTF-8">

		<title>列车时刻表查询</title>

		<meta name="viewport" content="width=device-width,initial-scale=1">

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

		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

	</head>

	<script src="js/connect.js"></script>

	<body onload="init()">

		<div data-role="page" id="pageone">

			<div data-role="header" data-position="fixed">

				<h1>列车时刻表查询</h1>

			</div>

			<div data-role="main" class="ui-content">

				<p align="center">请给我留言</p>

				<table data-role="table" class="ui-responsive">

					<thead>

						<tr>

							<th>姓名：</th>

							<th>留言：</th>

						</tr>

					</thead>

					<tbody>

						<tr>

							<td><input type="text" id="name"></td>

							<td><input type="text" id="memo"></td>

						</tr>

					</tbody>

				</table>

				<button type="submit" onclick="saveData()">留言</button>

				<table data-role="table" data-mode="" class="ui-responsive" id="datatable">

					<!--这里是留言板的显示区域-->

				</table>

			</div>

			<!--

            	作者：ceet@vip.qq.com

            	时间：2017-08-26

            	描述：底部TAB

            -->

			<div data-role="footer" data-position="fixed">

				<div data-role="navbar">

					<ul>

						<li>

							<a href="index.html#index" data-icon="grid" class="ui-btn-active">查询</a>

						</li>

						<li>

							<a href="index.html#detail" data-rel="popup" data-icon="star">收藏</a>

						</li>

						<li>

							<a href="test.html" data-icon="comment">给我留言</a>

						</li>

					</ul>

				</div>

			</div>

			<!--收藏功能-->

			<div data-role="popup" id="myPopup" class="ui-content" data-theme="b">

		      <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

		      <p>收藏成功，暂且不做处理!.</p>

		      <p>请点击右上角有个关闭按钮</p>

		      <p><b>提示：</b> 你也可以点击弹窗的外部区域来关闭弹窗。</p>

		    </div>

		</div>

	</body>

</html>

JS代码：

/**

 * HTML5 操作本地WebSQL数据库

 * 作者：汪政

 * 时间：2017/08/26 15：03：19

 */

var datatable = null;

var db = openDatabase("MyData", "", "My Database", 1024 * 100);

//初始化函数方法

function init() {

	datatable = document.getElementById("datatable");

	showAllData();

}

//首先移除乱七八糟的东西

function removeAllData() {

	for(var i = datatable.childNodes.length - 1; i >= 0; i--) {

		datatable.removeChild(datatable.childNodes[i]);

	}

	var tr = document.createElement("tr");

	var th1 = document.createElement("th");

	var th2 = document.createElement("th");

	var th3 = document.createElement("th");

	th1.innerHTML = "姓名";

	th2.innerHTML = "留言";

	th3.innerHTML = "时间";

	tr.appendChild(th1);

	tr.appendChild(th2);

	tr.appendChild(th3);

	datatable.appendChild(tr);

}

//显示WebSQL中的数据

function showData(row) {

	var tr = document.createElement("tr");

	var td1 = document.createElement("td");

	td1.innerHTML = row.name;

	var td2 = document.createElement("td");

	td2.innerHTML = row.message;

	var td3 = document.createElement("td");

	var t = new Date();

	t.setTime(row.time);

	td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();

	tr.appendChild(td1);

	tr.appendChild(td2);

	tr.appendChild(td3);

	datatable.appendChild(tr);

}

//显示所有的数据

function showAllData() {

	db.transaction(function(tx) {

		tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []);

		tx.executeSql("SELECT * FROM MsgData", [], function(tx, rs) {

			removeAllData();

			for(var i = 0; i < rs.rows.length; i++) {

				showData(rs.rows.item(i))

			}

		})

	})

}

//添加数据

function addData(name, message, time) {

	db.transaction(function(tx) {

		tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)", [name, message, time], function(tx, rs) {

				alert("留言成功！");

			},

			function(tx, error) {

				alert(error.source + "::" + error.message);

			}

	)

	})

}

//调用

function saveData() {

	var name = document.getElementById("name").value;

	var memo = document.getElementById("memo").value;

	var time = new Date().getTime();

	addData(name, memo, time);

	showAllData();

}

H5操作WebSQL数据库的更多相关文章

Python操作Oracle数据库：cx_Oracle
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
Java操作Sqlite数据库-jdbc连接
Java操作Sqlite数据库步骤: 1. 导入Sqlite jdbc 本文使用sqlite-jdbc-3.7.2.jar,下载地址 http://pan.baidu.com/s/1kVHAGdD 2 ...
PHP操作MySQL数据库5个步骤
PHP操作MySQL数据库一般可分为5个步骤:1.连接MySQL数据库服务器:2.选择数据库:3.执行SQL语句:4.关闭结果集:5断开与MySQL数据库服务器连接. 1.用mysql_connect ...
python操作mysql数据库的相关操作实例
python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...
SQL数据库添加新账号，只操作指定数据库
思路: 1.创建数据库服务器登录用户 2.创建指定数据库的用户,并且和服务器用户联系起来 3.给数据库的用户添加角色代码实现: 1.创建名为login的服务器登录用户dba,尼玛dbpwd,默认数据 ...
ASP.NET操作ORACLE数据库之模糊查询
ASP.NET操作ORACLE数据库之模糊查询一.ASP.NET MVC利用OracleHelper辅助类操作ORACLE数据库 //连接Oracle数据库的连接字符串 string connect ...
通过泛型数据，操作SQL数据库
本人在操作数据库的时候,采用将对象的形式操作传入数据库,经过大量百度和朋友帮助,总结出如下两个接口.用于插入数据,提取数据. 要这样操作的前提条件,就是类名和表名一致,类字段和表字段一致就可以了 // ...
转用C API 操作MySQL数据库
用C API 操作MySQL数据库参考MYSQL的帮助文档整理这里归纳了C API可使用的函数,并在下一节详细介绍了它们.请参见25.2.3节,“C API函数描述”. 函数描述 mysql_a ...
PHP操作mysql数据库：[2]查询数据听语音
本文主要详细讲解如何使用php语言,对mysql数据库进行查询.添加.删除.更新等操作. 工具/原料 Macromedia Dreamweaver 8 mysql数据库,php语言一.前言 ...

随机推荐

google 搜索不跳中间页
Array.prototype.slice.call(document.links,0).forEach(function(link){link.onmousedown = null}) 插件总失效 ...
为QML创建C++插件（下载）
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处 https://blog.csdn.net/MatchYang/article/details/54564462 1. 为QML创建C++插件的 ...
NOIP2017提高组模拟赛15（总结）
NOIP2017提高组模拟赛15(总结) 第一题讨厌整除的小明 [题目描述] 小明作为一个数学迷,总会出于数字的一些性质喜欢上某个数字,然而当他喜欢数字k的时候,却十分讨厌那些能够整除k而比k小的 ...
持久层框架Clone
Clone框架:http://www.52chloe.com/Wiki/Document/3324802610879266816 Clone框架支持多种数据库,我用的是sql server 基本查询: ...
VisualStudio UnitTest FrameWork
当创建单元测试时,Microsoft.VisualStudio.TestTools.UnitTesting的名字控件会添加到测试项目中,该名字控件中包含很多有用的类: 断言类:在单元测试中验证条件初 ...
Glide中的回调：targets
Glide隐藏了一大推复杂的在后台的场景,Glide做了所有的网络请求和处理在后台线程中,准备好了切回到ui线程后更新ImageView. 假设ImageView不再是图像的最后一步.我们只要Bitm ...
SQL 中多个 and or 的组合运算
sql关系型运算符优先级高到低为:not >and> or AND.OR运算符的组合使用在WHERE子句中,通过AND.OR运算符可以同时连接多个条件,当然AND.OR运算符也可以同时使 ...
如何设置ASP.NET站点页面运行超时
全局超时时间服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值.Machine.config 文件位于 % ...
lua-C++ userdata使用
lua-C++ userdata使用所负责的产品使用非常灵活,可设置的参数上千个,而且还支持用户用lua进行流程控制,所以开发中要用到很多lua.C++混合编程.之前对这些也还是一知半解,只会依葫芦 ...
nginx的rewrite规则
301跳转: server { listen 80; server_name www.xiaofan.com; return 301 https://$server_name$request_uri; ...

H5操作WebSQL数据库

H5操作WebSQL数据库的更多相关文章

随机推荐

热门专题