HTML5数据库操作，留言板实例

最新推荐文章于 2021-06-04 05:52:28 发布

weixin_33734785

最新推荐文章于 2021-06-04 05:52:28 发布

阅读量1.3k

点赞数 1

文章标签：数据库

原文链接：https://my.oschina.net/TAOH/blog/2049965

版权

为什么80%的码农都做不了架构师？>>>

1、数据库的基本操作

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据的操作 留言板的实例</title>
    <script src="js/94.js"></script>

</head>
<body onload="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" onclick="saveData()" value="保存"></td>
    </tr>

</table>

<hr>

<table id="datatable" border="1"></table>
<p id="msg"></p>
</body>
</html>

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("SELECT * FROM MsgData", [], function (tx, rs) {
            alert(rs.rows.length + "条已插入");
            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("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)");//创建数据库
        tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)", [name, message, time], function () {
            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();
    alert(name + "::" + memo + "::" + time);
    addData(name, memo, time);
    showAllData();
}

转载于:https://my.oschina.net/TAOH/blog/2049965