Html5使用sqllite数据库实现Web留言本

最新推荐文章于 2024-09-26 08:38:41 发布

牵手生活

最新推荐文章于 2024-09-26 08:38:41 发布

阅读量1k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/caizhigui/article/details/50881125

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

sqllite.html

<!DOCTYPE html>

  <html>

  <head lang="en">

    <meta charset="UTF-8">

    <title>sqllite使用数据库实现Web留言本</title>

    <script src="sqllite.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>

                <input type="button" value="删除" οnclick="deleteData()">

            </td>

            <td>

                <input type="button" value="保存" οnclick="saveData()">

            </td>

        </tr>

  

    </table>

    <hr/>

    <table id="datatable" border="1">

        <p id="msg"></p>

    </table>

  

  </body>

  </html>

sqllite.js

/**

 * Created by Administrator on 2016/3/13.

 */

  var datatable = null;

  //使用openDatabase方法来创建一个访问数据库的对象

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

                //document.getElementById("msg").innerHTML = "成功保存数据!";

            },

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

}

  

  // 删除表中数据

  function deleteData(){

    db.transaction(function(tx){

        tx.executeSql("DELETE FROM MsgData",[],function(tx, rs)          {

                //alert("数据删除成功!");

            },

            function(tx, error)          {

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

            });

    });

    showAllData();

}