HTML5本地数据库存储的应用

上一篇 文章介绍了一下本地数据库,已经相关的API,这篇文章我们利用上面的知识制作一个小demo。
做出来的界面如下:
HTML5本地数据库存储的应用_第1张图片
看起来是很普通的,简单地功能就是我们初学js的时候 要做的功能,增加 一行数据,删除一行数据,双击的时候能够编辑数据,但是比以前做的东西要多了 一个按钮那就是点击保存
什么叫点击保存呢?就是保存之后下次在进入这个 界面的时候数据并不会清空。而是显示已经存在数据库中的数据。
下面我们来一步步的设计这个界面:

1.设计出界面

"500" border="1" cellspacing="1">
    <caption>学生花名册caption><tr><th>姓名th><th>年龄th><th>性别th><th>班级th>tr>table><input type="button" value="添加一行" name="add"><input type="button" value="删除一行" name="del"><input type="button" value="点击保存" name="save">

2.把页面中的元素获取到

function $(a) {
   return document.getElementsByTagName(a)[0];
 }
 function $$(a) {
     return document.getElementsByName(a)[0];
 }
 var table  =  $("table"),
     tbody = $("tbody"),
     add = $$("add"),
     del = $$("del"),
     save = $$("save");

3. 打开页面的时候,打开数据显示对应的数据

var db = openDatabase("student", "1.0", "xuesheng", 1024 * 1024, function () {});
db.transaction(function (fx) {
    fx.executeSql(
            "create table if not exists stu (name TEXT, age TEXT,sex TEXT,class TEXT)",
            [],
            function () {
                alert("表创建成功");
            },
            function () {
                alert("表创建失败");
            }
    );
    fx.executeSql(
            "select * from stu",
            [],
            function (fx, result) {
                var len = result.rows.length;
                for (var i = 0; i < len; i++) {
                    var tr = document.createElement("tr");
                    tr.innerHTML += "
" + "" + "" + ""; tbody.appendChild(tr); } }, function () { alert("表创建失败"); } ); })

4. 点击添加功能和点击删除功能

add.onclick = function()  {
   var tr = document.createElement("tr");
    var str  = "";
    for(var i=0;i<4;i++)  {
        str+="
" } tr.innerHTML = str; tbody.appendChild(tr); };
del.onclick =  function() {
    var trs  = tbody.getElementsByTagName("tr");
   if(trs.length>1)  tbody.removeChild(trs[trs.length-1]);
};

5.双击编辑事件

 table.ondblclick = function(e) {
    var e  = e||window.event;
     var target = e.target || e.srcElement;
     if(target.nodeName == "TD") {
         var oldv = target.innerText;
         var input  = document.createElement("input");
         input.type = "text";
         input.style.width = target.offsetWidth+"px";
         input.value  = oldv;
         target.appendChild(input);
         input.onblur =  function () {
             var newv  = input.value;
             target.removeChild(this);
             target.innerHTML = newv;
         }
     }
 };

6. 点击保存事件

我们这里做的是,对每个数据都保存一遍

save.onclick = function () {
   var trs  = tbody.getElementsByTagName("tr");
     var len =  trs.length;
     alert(len);
     for(var i=0;ivar tds = trs[i].getElementsByTagName("td");
         db.transaction(function (fx) {
             fx.executeSql(
                     "insert into stu (name,age,sex,class)values(?,?,?,?)",
                     [tds[0].innerHTML,tds[1].innerHTML,tds[2].innerHTML,tds[3].innerHTML],
                     function () {alert("数据插入成功");},
                     function (tx,err) {
                         alert(tx+"数据插入失败"+err.message);
                     }
             )
         })
     }
 }

代码下载地址:代码下载

你可能感兴趣的:(HTML5,数据库,html5)

" + result.rows.item(i)["name"] + "" + result.rows.item(i)["age"] + "" + result.rows.item(i)["sex"] + "" + result.rows.item(i)["class"] + "