上一篇 文章介紹了一下本地資料庫，已經相關的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);
                     }
             )
         })
     }
 }

程式碼下載地址：程式碼下載