濟(jì)南網(wǎng)站建設(shè)知名品牌，首屈一指的高端品牌濟(jì)南網(wǎng)站建設(shè)中國(guó)旗艦級(jí)濟(jì)南網(wǎng)站建設(shè)服務(wù)商，重視用戶體驗(yàn)，創(chuàng)意，設(shè)計(jì)，開(kāi)發(fā)。9.2,4創(chuàng)建留言表這里的留言表需要3列，如下所示。9.2實(shí)例21：在客戶端關(guān)系數(shù)據(jù)庫(kù)中保存數(shù)據(jù)●139    title    留言的標(biāo)題，以便于引用    Note    留言    下面編寫一個(gè)方法來(lái)創(chuàng)建數(shù)據(jù)庫(kù)表：Download htm15sql/javascripts/notesis    createNotesTable=function()    {    db.transaction(function(tx){    tx.executeSql(    "CREATE TABLE notes (id INTEGER＼    PRIMARY KEY, title TEXT, note TEXT)¨,  [],    function()t alert(’Notes database created sUccessfu77y!.);),    function(tx, error){ alert(error.message);  ));    ))；    )：    我們?cè)谑聞?wù)中觸發(fā)SQL語(yǔ)句。該事務(wù)包含兩個(gè)回調(diào)方法，一個(gè)針對(duì)執(zhí)行成功的情況，一個(gè)針對(duì)執(zhí)行失敗的情況。這是以后類似動(dòng)作中使用的通用模式。    注意，executeSql()方法的第二個(gè)參數(shù)是個(gè)數(shù)組。該數(shù)組用來(lái)將SQL中的占位符綁定到變量。這樣便避免了拼接字符串，同其他語(yǔ)言中的prepare話句類似。此處，數(shù)組是空的，因?yàn)槲覀兊氖纠�中無(wú)需任何占位符。    現(xiàn)在第一個(gè)數(shù)據(jù)庫(kù)表就建好了，下面我們要讓這個(gè)應(yīng)用真正做點(diǎn)實(shí)際的操作。9.2.5加載留言    我們希望應(yīng)用加載的時(shí)候連接到數(shù)據(jù)庫(kù)（如果數(shù)據(jù)庫(kù)表不存在就創(chuàng)建一個(gè)）然后從數(shù)據(jù)庫(kù)中獲取所有的留言。Oownload htm15sqlOavascripts/notes.js／／從數(shù)據(jù)庫(kù)的notes表中獲取所有記錄fetchNotes=function(){  db.transaction(function(tx){    tx.executeSql('5:ELECT id, tit7e, note FROM notes',  []    functioncsoLTransaction, data){    for (var j=0;j<data.rows.length; ++i){140◆第9章客戶端數(shù)據(jù)的使用var  row = data.rows.item(i) ;var id = row['id'];var title = row[ 't/t7e'] ;    addToNotesList(id,  title);    )    ))；    ))；    )；    該方法從數(shù)據(jù)庫(kù)中獲取所有記錄。如果獲取成功，就遍歷所有記錄，調(diào)用addNoteToList方法，該方法如下所示：    Download htm15sql/jovoscripts/notes.Js    ／／指定id和標(biāo)題，將列表項(xiàng)添加到留言列表    addToNotesList=function(id, title){    var notes=$(¨#notes¨);    var item=$（”<7彳>”）；    item.attr( "data-id",id);    item.html (title)；    notes.append(item)；    )；    我們將記錄的ID嵌入到自定義的數(shù)據(jù)屬性中。然后在用戶單擊列表項(xiàng)的時(shí)候，我們會(huì)使用該ID定位數(shù)據(jù)庫(kù)中的記錄。然后將新創(chuàng)建的列表項(xiàng)連同notes的ID -起插入到前端的無(wú)序列表中。現(xiàn)在我們需要編寫加載數(shù)據(jù)的代碼，以便在用戶在列表中進(jìn)行選擇的時(shí)候?qū)⑵浼虞d到表單中。91216獲取指定記景    我們可以為每個(gè)列表項(xiàng)都添加一個(gè)click事件，但實(shí)踐經(jīng)驗(yàn)告訴我們，有更好的方法，那就是監(jiān)聽(tīng)整張無(wú)序列表中的單擊事件，然后判斷被單擊的項(xiàng)。這樣的話，如果列表中的項(xiàng)增加了（比如添加了一條留言），也無(wú)需為其再添加單擊事件了。    在iQuery函數(shù)中，添加如下代碼：Download htm15sqUjavoscripts/notes.js$( "#notes") .click(function(event) t if ($(event.target).is('7/'》 {   var element = $(event.target);             loadNote (el ement . att r ( "da ta-id "》   }))；它會(huì)調(diào)用loadNote0方法，該方法如下：Download htm15sql/javascripts/notes.js9.2實(shí)例21:在客戶端關(guān)系數(shù)據(jù)庫(kù)中保存數(shù)據(jù)●141loadNote = function(id){ db.transaction(function(tx) {    tx.executeSql('SELECT /d, tit7e, note FROM notes where id = ?', [id]    function(SQLTransaction, data){      var row = data.rows.item(0);      var title = $("#tit7e");              var  note  =  $( "#note") ;)))；))title.val(row["tit7e"]); ti tl e . attr( "data-/d" ,    row [ "/d"])note.val(row[ "note"]) ;$("#de7ete_button").show();    此函數(shù)同先前的fetchNotes0很像。其中觸發(fā)一條SQL語(yǔ)句，然后處理成功的情況。這里的語(yǔ)句中包含一個(gè)問(wèn)號(hào)占位符，其實(shí)際值以數(shù)組元素的形式寫在第二個(gè)參數(shù)中。    當(dāng)查找到某條記錄的時(shí)候，就將其顯示在表單中。該方法同時(shí)還會(huì)啟用Delete按鈕，并將記秉的ID嵌入到自定義數(shù)據(jù)屬性中，這樣便于處理更新操作。Save按鈕會(huì)檢測(cè)ID是否存在。如果存在，就更新記錄。如果不存在，就認(rèn)為它是一條新記錄。下面我們來(lái)編寫這段邏輯。9.2.7插入、更新和刪除記錄    當(dāng)用戶單擊Save按鈕的時(shí)候，要觸發(fā)代碼來(lái)進(jìn)行新數(shù)據(jù)插入或者更新已有數(shù)據(jù)。我們將在Save按鈕上添加一個(gè)單擊事件處理程序，方法是將下面的代碼添加到iQuery函數(shù)中：Download htm15sql/javascripts/nofes.js$( "#save_button") .click(function(event) {   event.preventDefault() ; var title = $("#tit7e");  var note = $("#note");if(title.attr("data-id"》{   updateNote(title, note);}else{   insertNote(title, note);   }});    此方法檢測(cè)表單中標(biāo)題域的data-id屬性。如果沒(méi)有ID，表單認(rèn)為用戶在添加新記錄，便會(huì)觸發(fā)insertNote方法，此方法如下：