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

随机推荐

Hibernate中session回话的get方法和load方法的区别
1.报错方式不同: 前提:获取的数据不存在 get方法会报异常:空指针异常 load方法会报异常:对象为找到异常,给定值没有行存在. 2.load方法这种方式总是会返回一个代理而不是真正得去查询数据 ...
crm操作报价单实体
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using Microsoft ...
揭秘Product Hunt怎样运用邮件崛起
Product Hunt正被硅谷热议,而大家谈论Product Hunt时,经常涉及邮件营销. Product Hunt由Ryan Hoover 在2013年11月创立.鼓舞人们发现和分享新产品的站点 ...
bzoj3262: 陌上花开(cdq分治+树状数组)
3262: 陌上花开题目:传送门题解: %%%cdq分治很强大的一个暴力...感觉比分块高级多了这道题目就是一个十分经典的三维偏序的例题: 一维直接暴力排序x 二维用csq维护y 三维用树状数 ...
akka 原理分析优秀博客
http://www.nyankosama.com/2014/12/15/akka-source/ http://blog.csdn.net/aigoogle/article/details/4210 ...
从SQL注入谈数据访问层
什么是SQL注入? SQL注入就是应用程序的开发人员未预期的吧SQL语句传入到应用程序的过程,如果直接使用用户输入的值来构建SQL语句的应用程序是很可能会受到SQL注入攻击的.特别是基于浏览器的网络应 ...
Windows 下 Sketch 替代 APP(UWP)
不得了,这个版本开始支持 Sketch 的打开了,还可以编辑. https://www.adobe.com/cn/products/xd/features.html Lunacy 支持 Sketch ...
（转载）Android：学习AIDL，这一篇文章就够了(上)
前言在决定用这个标题之前甚是忐忑,主要是担心自己对AIDL的理解不够深入,到时候大家看了之后说——你这是什么玩意儿,就这么点东西就敢说够了?简直是坐井观天不知所谓——那样就很尴尬了.不过又转念一想, ...
初识Git(三)
这次要记录一下对branch,merge的学习. 与先前一样创建一个pro文件夹,initi该文件夹,在该文件夹中新建一个空的MainCode.txt,然后add文本文件并且commit. 接下来我们 ...
ActiveMQ学习笔记（16）----Message Dispatch高级特性（二）
1. Optimized Acknowledgetment ActiveMQ缺省支持批量确认消息,由于批量确认会提高性能,如果希望在应用程序中禁止经过优化的确认方式,可以采用以下几种方式: 1. 在C ...

H5操作WebSQL数据库

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

随机推荐

热门专题