【簡單的留言本】用HTML新增的數(shù)據(jù)庫實現(xiàn)

使用數(shù)據(jù)庫實現(xiàn)的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("成功保存數(shù)據(jù)裁着!");

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

}

使用數(shù)據(jù)庫實現(xiàn)的Web留言本

姓名:

留言:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末无宿,一起剝皮案震驚了整個濱河市弄喘,隨后出現(xiàn)的幾起案子脐帝,更是在濱河造成了極大的恐慌,老刑警劉巖蒜哀,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件碟婆,死亡現(xiàn)場離奇詭異,居然都是意外死亡纯衍,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進(jìn)店門苗胀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來襟诸,“玉大人,你說我怎么就攤上這事柒巫±ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵堡掏,是天一觀的道長。 經(jīng)常有香客問我刨疼,道長泉唁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任揩慕,我火速辦了婚禮亭畜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘迎卤。我一直安慰自己拴鸵,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布蜗搔。 她就那樣靜靜地躺著劲藐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪樟凄。 梳的紋絲不亂的頭發(fā)上聘芜,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天,我揣著相機(jī)與錄音缝龄,去河邊找鬼汰现。 笑死挂谍,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瞎饲。 我是一名探鬼主播口叙,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嗅战!你這毒婦竟也來了妄田?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤仗哨,失蹤者是張志新(化名)和其女友劉穎形庭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體厌漂,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡萨醒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了苇倡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片富纸。...
    茶點(diǎn)故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖旨椒,靈堂內(nèi)的尸體忽然破棺而出晓褪,到底是詐尸還是另有隱情,我是刑警寧澤综慎,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布涣仿,位于F島的核電站,受9級特大地震影響示惊,放射性物質(zhì)發(fā)生泄漏好港。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一米罚、第九天 我趴在偏房一處隱蔽的房頂上張望钧汹。 院中可真熱鬧,春花似錦录择、人聲如沸拔莱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽塘秦。三九已至,卻和暖如春货裹,著一層夾襖步出監(jiān)牢的瞬間嗤形,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工弧圆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赋兵,地道東北人笔咽。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像霹期,于是被迫代替她去往敵國和親叶组。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 單例模式 適用場景:可能會在場景中使用到對象历造,但只有一個實例甩十,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式吭产,...
    Obeing閱讀 2,058評論 1 10
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品侣监,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式臣淤。簡單...
    舟漁行舟閱讀 7,726評論 2 17
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 875評論 0 0
  • H5 meta詳解 viewport width:控制 viewport 的大小橄霉,可以指定的一個值,如果 600邑蒋,...
    FConfidence閱讀 811評論 0 3
  • 第一部分 準(zhǔn)入訓(xùn)練 第1章 進(jìn)入忍者世界 js開發(fā)人員通常使用js庫來實現(xiàn)通用和可重用的功能姓蜂。這些庫需要簡單易用,...
    如201608閱讀 1,345評論 1 2