使用数据库实现web留言本-优快云博客

本文链接：https://blog.youkuaiyun.com/cba142536/article/details/54633685

今天研究了一天这个代码，可是还是实现不了效果，代码应该是没问题了。我觉得可能是没有安装什么插件，或配置数据库什么的，我现在学的知识太少，解决不了这个问题，希望明天能查出来原因。

web04.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="web04.js"></script>
</head>
<body οnlοad="init()">
<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>

web04.js

var datatable=null;
var db=openDatabase("MyData","","My Database",1024*100);
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<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 saveData() {
    var name=document.getElementById("name").value;
    var memo=document.getElementById("memo").value;
    var time=new Date().getTime();
    addData(name,memo,time);
    showAllData();
}