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

来源：互联网发布：https协议端口编辑：程序博客网时间：2024/06/10 21:53

sqllite.html

<!DOCTYPE html>  <html>  <head lang="en">    <meta charset="UTF-8">    <title>sqllite使用数据库实现Web留言本</title>    <script src="sqllite.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>                <input type="button" value="删除" onclick="deleteData()">            </td>            <td>                <input type="button" value="保存" onclick="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();}

0 0