<! doctype html> <html> <head lang = en> <meta charset = utf-8> <title> 列车时刻表查询 </title> <meta name = viewport content = width = width device ، 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 datail-position = ثابت> <h1> 列车时刻表查询 </h1> </viv> <div data-role = main class = ui-content> <p align = center> 请给我留言 </p> <table data-role = Table Class = UI-responsive> <thead> <tr> <th> 姓名 ： </h> <th> 留言 ： </th> </tr> </thead> <tbody> <td> <td> <إدخال type = text id = name> </td> <td> <type type = text text = memo> </td> </tbor> </tbody> </table>留言 </button> <جدول البيانات data-dole = table data-mode = class = ui-consponsive id = dataTable> <!-这里是留言板的显示区域-> </table> </div> <!- -： [email protected] ： ： 2017-08-26 描述 ： ： tab-> <div data-role = footer data ditation = flex > <a href = index.html#index data-icon = grid class = ui-btn-active> 查询 </a> </li> <li> <a href = index.html#تفاصيل البيانات -icon = star> 收藏 </a> </li> <li> <a href = test.html data-icon = comment> 给我留言 </a> </li> </ul> </viv> < /div> <!-收藏功能-> <div data-dole = popup id = mypopup class = ui-content data-theme = b> <a href =# data-rel = back class = ui-btn u-- btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right> قريب </a> <p> 收藏成功 ， 暂且不做处理!. < /p> <p> 请点击右上角有个关闭按钮 </p> <p> <b> 提示 ： </b> 你也可以点击弹窗的外部区域来关闭弹窗。 </p> </ div> </viv> </body> </html>JS 代码 ：
/** * html5 操作本地 websql 数据库 * ： ： ： * ： ： 2017/08/26 15：03：03 */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 ؛ ]) ؛ } 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 = تاريخ جديد () ؛ T.Settime (Row.time) ؛ td3.innerhtml = t.tolocaledateString () + + t.tolocaletimestring () ؛ Tr.AppendChild (TD1) ؛ Tr.AppendChild (TD2) ؛ Tr.AppendChild (TD3) ؛ datatable.appendchild (tr) ؛} // 显示所有的数据 وظيفة showAllData () {db.transaction (function (tx) {tx.executesql (إنشاء جدول إذا لم يكن موجودًا msgdata (نص اسم ، نص الرسالة ، عدد صحيح الوقت) ، [ ]) ؛ العنصر (i))}})})} // 添加数据 الوظيفة addData (الاسم ، الرسالة ، الوقت) {db.transaction (function (tx) {tx.executesql (insert في قيم msgdata (؟ ،؟ ،؟) ، [الاسم ، والوقت] ، والوظيفة (TX ، RS) {Alert (留言成功！) ؛ // 调用 function saveedata () {var name = document.getElementById (name) .value ؛ var memo = document.getElementById (memo) .value ؛ var time = new date (). getTime () ؛ adddata (الاسم ، المذكرة ، الوقت) ؛ ShowallData () ؛}： ： bug 无法藏身；另一个就是让其足够的复杂 ， 让人找不到 bug 。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 websql 数据库的实例代码 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对vevb 武林网网站的支持！