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数据库的更多相关文章

  1. Python操作Oracle数据库：cx_Oracle

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  2. Java操作Sqlite数据库-jdbc连接

    Java操作Sqlite数据库步骤: 1. 导入Sqlite jdbc 本文使用sqlite-jdbc-3.7.2.jar,下载地址 http://pan.baidu.com/s/1kVHAGdD 2 ...

  3. PHP操作MySQL数据库5个步骤

    PHP操作MySQL数据库一般可分为5个步骤:1.连接MySQL数据库服务器:2.选择数据库:3.执行SQL语句:4.关闭结果集:5断开与MySQL数据库服务器连接. 1.用mysql_connect ...

  4. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  5. SQL数据库添加新账号，只操作指定数据库

    思路: 1.创建数据库服务器登录用户 2.创建指定数据库的用户,并且和服务器用户联系起来 3.给数据库的用户添加角色 代码实现: 1.创建名为login的服务器登录用户dba,尼玛dbpwd,默认数据 ...

  6. ASP.NET操作ORACLE数据库之模糊查询

    ASP.NET操作ORACLE数据库之模糊查询 一.ASP.NET MVC利用OracleHelper辅助类操作ORACLE数据库 //连接Oracle数据库的连接字符串 string connect ...

  7. 通过泛型数据，操作SQL数据库

    本人在操作数据库的时候,采用将对象的形式操作传入数据库,经过大量百度和朋友帮助,总结出如下两个接口.用于插入数据,提取数据. 要这样操作的前提条件,就是类名和表名一致,类字段和表字段一致就可以了 // ...

  8. 转 用C API 操作MySQL数据库

    用C API 操作MySQL数据库 参考MYSQL的帮助文档整理 这里归纳了C API可使用的函数,并在下一节详细介绍了它们.请参见25.2.3节,“C API函数描述”. 函数 描述 mysql_a ...

  9. PHP操作mysql数据库：[2]查询数据听语音

    本文主要详细讲解如何使用php语言,对mysql数据库进行查询.添加.删除.更新等操作. 工具/原料   Macromedia Dreamweaver 8 mysql数据库,php语言 一.前言   ...

随机推荐

  1. Ubuntu下使用Deepin-wine的移植版安装qq微信等

    title: Ubuntu下使用Deepin-wine的移植版安装qq微信等 toc: false date: 2018-09-18 16:12:49 categories: methods tags ...

  2. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  3. html5+css3+javascript 自定义提示窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  4. (转载）[Android开发]zxing扫描结果乱码

    ZXing扫描二维码出现中文乱码的问题最近项目的功能需要用到扫描二维码.就参考了google的开源项目ZXing..功能完成后..发现扫条形码没有问题..但是扫描二维码的时候却有一部分是乱码..或者不 ...

  5. 乌班图 之 设置镜像服务器 、设置屏幕分辨率QAQ

    设置镜像服务器 Ubuntu 中的大部分软件安装都是用apt命令,从Ubuntu的服务器上直接安装的. 但是国外你懂的网速是硬伤,因此要搞个镜像服务器,内容当然都是一样的咯. 第一步:进入系统设置 第 ...

  6. [ Linux ] [ OS ] [ CPU ] Linux系統 OS, CPU, Memory, Disk

    查看 linux 版本 及 Kernel 版本 指令: cat /etc/*-release http://benit.pixnet.net/blog/post/19390916-%E5%A6%82% ...

  7. 【转载】大型系统中使用JMS优化技巧

    [本文转自:http://www.javabloger.com/article/sun-openmq-jms-large-scale-systems.html] 我们先来看看在Sun OpenMQ系统 ...

  8. uva 11584 - 字符串 dp

    题目链接 一个长度1000的字符串最少划分为几个回文字符串 ---------------------------------------------------------------------- ...

  9. laravel 5.5 项目报错

    报错内容: ErrorException (E_WARNING) Declaration of App\Observers\SiteObserver::updated($site) should be ...

  10. 版本号比较[versionCompare]

    /*** * 版本号比较 * @param v1 版本号a * @param v2 版本号b * @return -1代表不是合格版本号:0代表一样大.1 代表版本号a大于版本号b.2代表版本号b大于 ...