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

随机推荐

【Linux驱动】TQ2440 DM9000E网卡驱动移植（Linux-2.6.30.4）
花了一天的时间研究了一下Linux-2.6.30.4版本号内核下关于TQ2440 DM9000E的网卡驱动移植.总结一下自己的收获. 事实上.在Linux-2.6.30.4版本号内核下有关于网卡驱动, ...
UVA - 10229 Modular Fibonacci 矩阵快速幂
Modular Fibonacci The Fibonacci numbers (0, 1, 1, 2, 3, 5, 8, 13, 21, 3 ...
vue 路由demo2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
[luogu P1776] 宝物筛选解题报告(单调队列优化DP)
题目链接: https://www.luogu.org/problemnew/show/P1776 题目: 终于,破解了千年的难题.小FF找到了王室的宝物室,里面堆满了无数价值连城的宝物……这下小FF ...
[bzoj 1398] Vijos1382寻找主人 Necklace 解题报告（最小表示法）
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1398 题目: Description 给定两个项链的表示,判断他们是否可能是一条项链. ...
Redis-3-string类型
Redis-3-string类型标签(空格分隔): redis set key value [ex 秒数] / [px 毫秒数] [nx] /[xx] mset key value key valu ...
vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
zookeeper客户端命令行操作
一.命令行 (1)使用zookeeper安装bin目录下的./zkCli.sh连接到zookeeper服务器上,基本语法如下: ./zkCli.sh -timeout 0 -r -server ip: ...
js实现数组的去重
function filterRepat(arr){ if(Array.isArray(arr) && arr.length){ var arr = arr.filter(functi ...
POJ 3190 Stall Reservations 【贪心优先队列】
题意:给出n头牛必须单独占用一台机器的时间段,问至少需要多少台机器先按照每头牛的时间的x来排序,然后用一个优先队列(优先选取最小的)维护已经喂好的牛的最小的结束时间比如现在优先队列里面有m头牛已经 ...

H5操作WebSQL数据库

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

随机推荐

热门专题