您的位置：首页 > 数据库

html5本地数据库-web留言本

2016-05-16 20:50 483 查看

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<script type="text/javascript">

var datatable=null;

var db=openDatabase("myData","1.0","my database",2*1024*1024);//创建一个数据库

function init(){

datatable=document.getElementById('datatable');

showAllData();

}

function 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);

}

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 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();

td3.innerHTML=t.toLocaleDateString()+" "+t.toLocaleTimeString();

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

datatable.appendChild(tr);

}

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 saveData(){

var name=document.getElementById("name").value;

var memo=document.getElementById("memo").value;

var time=new Date().getTime();

addData(name,memo,time);

showAllData();

}

</script>

</head>

<body onload="init()">

<h1>web留言本</h1>

<table>

<tr>

<td>用户名</td>

<td><input type="text" name="name" id="name"></input></td>

</tr>

<tr>

<td>留言</td>

<td><textarea name="memo" id="memo" cols="50" rows="5"></textarea></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="提交" onclick="saveData()"></input></td>

</tr>

</table>

<table id="datatable" border="1"> </table>

<p id="msg"></p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航