<！doctype html> <html> <head lang = en> <meta charset = utf-8> <title> <title> </title> </title> <meta name = fiewport content = width = width = device-width = device-width，jirinit-scale = 1> <link rel = stylesheet href = http：//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.4.5.min.css/> <script src = http：//code.jquery.jquery。 com/jquery-1.11.1.1.min.js> </script> <script src = http：//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.4.5.min.js> </js> </脚本> </head> <script src = js/connect.js> </script> <body onload = init（）> <div dak data-role = page ID = pageOne> pageOne> <div dak data-role = header data-posity = header data-position =固定> <h1>列车时刻表查询</h1> </div> <div data-role = main class = ui-content> <p align = center> center> </p> </p> <table data-role =表类= ui-revonsive> <thead> <tr> <th> <th>姓名：</th> <th>留言：</th> </th> </tr> </thead> <tbody> <tbody> <tr> <tr> <td> <input type = text ID = name> </td> <td> <input type = text ID = memo> </td> </td> </tr> </tbody> </table> </table> <button> <button type = smind onclick = savedata（）>留言</button> <table data-role = table data-mode = class = ui-emponsive id = datatable> <！ - 这里是留言板的显示区域-> </table> </div> </div> <！ - - 作者：[email protected]时间：2017-08-26描述：底部tab-> <div data-role = footer data-position = field> <div dagation-role = div data-role = navbar> <ul> <ul> <ul> <li > <a href = index.html＃index data-icon = grid class = ui-btn-active>查询</a> </a> </li> <li> <a a href = index.html＃ -icon = star>收藏</a> </li> <li> <a href = test.html data-icon = comment> comment> </a> </a> </li> </li> </ul> </ul> </div> </div> < /div> <！ - 收藏功能-> <div data-role = popup id = myPopup class = ui-content data-theme = b> <a href =＃data-rel = back class = ui-btn btn-a ui-corner-all ui-shadow ui-btn ui-btn ui-delete ui-btn-icon-notext ui-btn-right> close> close </a> <p>收藏成功/p> <p> </p> <p> <b> <b>提示：</b>你也可以点击弹窗的外部区域来关闭弹窗。</p> </p> </p> </ Div> </div> </body> </html>JS代码：
/** * html5操作本地websql数据库 *作者：汪政 *时间：2017/08/26 15:03:19 */var datatable = null; var db = opendatabase（mydata，，，，，我的数据库，1024 * 100）; //初始化函数方法函数init（）{datatable = document.getElementById（dataTable）; showalldata（）;} //首先移除乱七八糟的东西函数removeAlldata（）{for（var i = datatable.childnodes.length-1; i> = 0; i> = 0; i--）{datatable.removechild（dataTapable.child.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.tolecaletimestring（）; tr.AppendChild（TD1）; tr.AppendChild（TD2）; tr.AppendChild（TD3）; datatable.appendchild（tr）;} //显示所有的数据函数showalldata（）{db.transaction（function（tx）{tx.executesql（创建表格（如果不存在）smsgdata（name text，message text，time integer），[ ）; tx.executesql（从msgdata，[]，function（tx，rs）{removeAlldata（）; for（var i = 0; i <rs.Rows.length; i ++）{ item（i））}}）}}} //添加数据函数adddata（name，messages，time）{db.transaction（function（tx）{tx.executesql（插入smsgdata values（？，？），？），？），？ [名称，消息，时间]，功能（TX，RS）{alert（留言成功！）; //调用函数savedata（）{var name = document.getElementById（name）.value; var memo = document.getElementById（memo）.value; var time = new date（）。getTime（）; adddata（名称，备忘录，时间）; showalldata（）;}我们有两个方法来进行软件设计：一个是让其足够的简单以至于让bug 无法藏身；另一个就是让其足够的复杂，让人找不到bug。前者更难一些。
总结以上所述是小编给大家介绍的html5操作websql数据库的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对，小编会及时回复大家的。在此也非常感谢大家对VEVB 武林网网站的支持！