【简单的留言本】用HTML新增的数据库实现

使用数据库实现的WEB留言本

var datatable = null;

var db = openDatabase('Mydata','','My Database',102400);

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 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

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,rs) {

alert(error.source+"::" + error.message);

});

});

}

function saveData() {

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

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

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

//alert(time);

addData(name,memo,time);

showAllData();

}

使用数据库实现的Web留言本

姓名:

留言:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,490评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,392评论 2 17
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 4,444评论 0 0
  • H5 meta详解 viewport width:控制 viewport 的大小,可以指定的一个值,如果 600,...
    FConfidence阅读 4,262评论 0 3
  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 5,160评论 1 2

友情链接更多精彩内容