<! Doctype html> <html> <head lang = en> <meta charset = utf-8> <title> 列车时刻表查询 </title> <meta name = viewport content = width = width устройства, начальная масштаба = 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> </ Скрипт> </head> <script src = js/connect.js> </script> <body onload = init ()> <div data-role = page id = pageone> <div data-role = заголовок Data Position = Исправлено> <h1> 列车时刻表查询 </h1> </div> <div Data-Role = Main Class = UI-content> <p align = center> 请给我留言 </p> <таблица Data-Role = Таблица класс = ui-reponsive> <thead> <tr> <th> 姓名 ： </th> <Th> 留言 ： </th> </tr> </thead> <tbody> <tr> <td> <Ввод type = text id = name> </td> <td> <input type = text id = memo> </td> </tr> </tbody> </table> <button Type = Onclick = saveData ()>留言 </button> <Таблица Data Role = Table Data-Mode = class = UI-reponsive ID = DataTable> <!-这里是留言板的显示区域-> </table> </div> <!- -： ： [email protected] ： ： 2017-08-26 描述 ： 底部 Tab-> <div Data-Role = pooter 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#подробный данных rel = opup data -icon = star> 收藏 </a> </li> <li> <a href = test.html data-iCon = Комментарий> 给我留言 </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-iicon-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, моя база данных, 1024 * 100); // 初始化函数方法 function init () {dataTable = document.getElementById (dataTable); ShowAllData ();} // 首先移除乱七八糟的东西 функция 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 中的数据 Функция 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 (создавать таблицу, если не существует msgdata (имя текст, текст сообщения, время Integer), [ ];); item (i))}})})} // 添加数据 Функция addData (имя, сообщение, время) {db.transaction (function (tx) {tx.executesql (вставьте в значения msgdata (?,?), [Имя, Сообщение, время], Функция (TX, RS) {Alert (留言成功！); // 调用 function savedata () {var name = document.getElementbyid (name) .value; var memo = document.getElementbyId (memo) .value; var time = new Date (). getTime (); addData (имя, меморандум, время); showalldata ();}： ： 一个是让其足够的简单以至于让 ошибка 无法藏身；另一个就是让其足够的复杂 让人找不到 ошибка 。前者更难一些。 。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 websql 数据库的实例代码 希望对大家有所帮助 希望对大家有所帮助 如果大家有任何疑问请给我留言 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对Vevb 武林网网站的支持！