HTML5本地数据库存储的应用

上一篇 文章介绍了一下本地数据库，已经相关的API，这篇文章我们利用上面的知识制作一个小demo。
做出来的界面如下：

看起来是很普通的，简单地功能就是我们初学js的时候 要做的功能，增加 一行数据，删除一行数据，双击的时候能够编辑数据，但是比以前做的东西要多了 一个按钮那就是点击保存。
什么叫点击保存呢？就是保存之后下次在进入这个 界面的时候数据并不会清空。而是显示已经存在数据库中的数据。
下面我们来一步步的设计这个界面：

1.设计出界面

<table width="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 += "<td>" + result.rows.item(i)["name"] + "</td>" + "<td>" + result.rows.item(i)["age"] + "</td>" + "<td>" + result.rows.item(i)["sex"] + "</td>" + "<td>" + result.rows.item(i)["class"] + "</td>";
                    tbody.appendChild(tr);
                }
            },
            function () {
                alert("表创建失败");
            }
    );
})

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

add.onclick = function()  {
   var tr = document.createElement("tr");
    var str  = "";
    for(var i=0;i<4;i++)  {
        str+="<td>&nbsp;</td>"
    }
    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;i<len;i++) {
         var 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);
                     }
             )
         })
     }
 }

代码下载地址：代码下载