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语言一.前言 ...

随机推荐

机器翻译引擎的基本原理 ——LSTM
机器翻译引擎的基本原理摘自:infoq 谷歌机器翻译 Zero-shot:零次 Training:训练 Google Neural Machine Translation:谷歌神经机器翻译我们每 ...
几个常用ORACLE运维监控的SQL语句
1.消耗CPUSELECT a.CPU_TIME, --CPU时间百万分之一(微秒) a.OPTIMIZER_MODE,--优化方式 a.EXEC ...
Elasticsearch之重要核心概念（cluster（集群）、shards（分配）、replicas（索引副本）、recovery（据恢复或叫数据重新分布）、gateway（es索引的持久化存储方式）、discovery.zen（es的自动发现节点机制机制）、Transport（内部节点或集群与客户端的交互方式）、settings（修改索引库默认配置）和mappings）
Elasticsearch之重要核心概念如下: 1.cluster 代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是 ...
asp.net mvc5 文件下载上传
下载:是通过点击a标签直接下载的方式,没有其他任何要求,在服务器上存在实体文件,不需要请求后台控制层前段js: <a id="NF-DownLoad" authorize= ...
（转载）Mac系统下利用ADB命令连接android手机并进行文件操作
Mac系统下利用ADB命令连接android手机并进行文件操作标签: Mac adb android 2016-03-14 10:09 5470人阅读评论(1) 收藏举报分类: Androi ...
（转载）Android：学习AIDL，这一篇文章就够了(下)
前言上一篇博文介绍了关于AIDL是什么,为什么我们需要AIDL,AIDL的语法以及如何使用AIDL等方面的知识,这一篇博文将顺着上一篇的思路往下走,接着介绍关于AIDL的一些更加深入的知识.强烈建议 ...
003.JMS概述
1. 基本概念 JMS:Java Message Service, Java消息服务,是Java EE中的一个技术. JMS规范:JMS定义了Java中访问消息中间件的接口,并没有给予实现,实现JMS ...
【原创】Apache服务器500错误失去响应的问题解决
某生产网站部署在Apache上,使用tomcat集群,偶尔网站失去响应,查看首页发现无法打开,页面假死,出现过多次,查看apache的日志,发现经常出现以下提示: [Fri Dec :: ] [war ...
pic16F1938
1.中断自动保存寄存器:W.STATUS.BSR.FSR和PCLATH,而且如果中断中需要改变这些寄存器,在Bank31中修改这些寄存器的影子寄存器即可. 2.RAM有1024字节,分为N个bank, ...
Angualr+asp.net core webapi+efcore系列
想着学习一门前端框架,WTF,看了又看,卧槽对于.Net程序员来说,还有什么比面向对象更香的呢,所以果断的选择了Angular.正好看各路大神以及官方文档想学习一下asp.net core,那就搞起吧 ...

H5操作WebSQL数据库

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

随机推荐

热门专题