<!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 武林网网站的支持!