<!DOCTYPE html> <!--使用数据库实现Web留言本--> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="appWeb25.js"></script> </head> <body οnlοad="init()"> 本课时讲解通过使用本地数据和executesql来执行查询完成一个Web留言本。掌握对本地数据库的使用。 <table> <tr> <td>姓名</td> <td><input type="text" id="name"></td> </tr> <tr> <td>留言</td> <td><input type="text" id="memo"></td> </tr> <tr> <td></td> <td><input type="button" value="保存" οnclick="saveData()"></td> </tr> </table> <hr> <table id="datatable" border="1"> </table> <p id="msg"></p> </body></html>
js:
/** * Created by renchong on 2015/7/26. */ var datatable = null; var db = openDatabase("MyData", "", "My Database", 1024*100); function init() { datatable = decument.getElementById("datatable"); ShowAllData() } function removeAllData() { for (var i = datatable.hasChildNodes.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); } 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 function saveData() { var name = document.getElementById("name").value; var memo = document.getElementById("memo").value; var time = new Date().getTime(); addData(name, memo, time); ShowAllData(); } }
HTML5基础25----使用数据库实现Web留言本(功能未实现)
最新推荐文章于 2021-01-19 14:44:08 发布