HTML5基础25----使用数据库实现Web留言本（功能未实现）

最新推荐文章于 2021-01-19 14:44:08 发布

zhaihaohao1

最新推荐文章于 2021-01-19 14:44:08 发布

阅读量1.1k

点赞数

分类专栏： HTML5基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47079033

版权

HTML5基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--使用数据库实现Web留言本-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb25.js"></script>
</head>
<body οnlοad="init()">
本课时讲解通过使用本地数据和executesql来执行查询完成一个Web留言本。掌握对本地数据库的使用。
<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>
js:
/**
 * Created by renchong on 2015/7/26.
 */

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

    }


}

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础25----使用数据库实现Web留言本（功能未实现）

html>lang="en"> charset="UTF-8"> src="appWeb25.js">onload="init()">本课时讲解通过使用本地数据和executesql来执行查询完成一个Web留言本。掌握对本地数据库的使用。姓名 type="text" id="name">
复制链接

扫一扫

专栏目录