專業提供濟南網站建設服務,豐富的濟南網站設計和濟南網站制作經驗,為企業公司提供濟南網站建設,濟南網站設計,濟南網站開發,手機網站。html5技術分享

9.2,4創建留言表這里的留言表需要3列，如下所示。9.2實例21：在客戶端關系數據庫中保存數據●139    title    留言的標題，以便于引用    Note    留言    下面編寫一個方法來創建數據庫表：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);  ));    ))；    )：    我們在事務中觸發SQL語句。該事務包含兩個回調方法，一個針對執行成功的情況，一個針對執行失敗的情況。這是以后類似動作中使用的通用模式。    注意，executeSql()方法的第二個參數是個數組。該數組用來將SQL中的占位符綁定到變量。這樣便避免了拼接字符串，同其他語言中的prepare話句類似。此處，數組是空的，因為我們的示例中無需任何占位符。    現在第一個數據庫表就建好了，下面我們要讓這個應用真正做點實際的操作。9.2.5加載留言    我們希望應用加載的時候連接到數據庫（如果數據庫表不存在就創建一個）然后從數據庫中獲取所有的留言。Oownload htm15sqlOavascripts/notes.js／／從數據庫的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章客戶端數據的使用var  row = data.rows.item(i) ;var id = row['id'];var title = row[ 't/t7e'] ;    addToNotesList(id,  title);    )    ))；    ))；    )；    該方法從數據庫中獲取所有記錄。如果獲取成功，就遍歷所有記錄，調用addNoteToList方法，該方法如下所示：    Download htm15sql/jovoscripts/notes.Js    ／／指定id和標題，將列表項添加到留言列表    addToNotesList=function(id, title){    var notes=$(¨#notes¨);    var item=$（”<7彳>”）；    item.attr( "data-id",id);    item.html (title)；    notes.append(item)；    )；    我們將記錄的ID嵌入到自定義的數據屬性中。然后在用戶單擊列表項的時候，我們會使用該ID定位數據庫中的記錄。然后將新創建的列表項連同notes的ID -起插入到前端的無序列表中。現在我們需要編寫加載數據的代碼，以便在用戶在列表中進行選擇的時候將其加載到表單中。91216獲取指定記景    我們可以為每個列表項都添加一個click事件，但實踐經驗告訴我們，有更好的方法，那就是監聽整張無序列表中的單擊事件，然后判斷被單擊的項。這樣的話，如果列表中的項增加了（比如添加了一條留言），也無需為其再添加單擊事件了。    在iQuery函數中，添加如下代碼：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 "》   }))；它會調用loadNote0方法，該方法如下：Download htm15sql/javascripts/notes.js9.2實例21:在客戶端關系數據庫中保存數據●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();    此函數同先前的fetchNotes0很像。其中觸發一條SQL語句，然后處理成功的情況。這里的語句中包含一個問號占位符，其實際值以數組元素的形式寫在第二個參數中。    當查找到某條記錄的時候，就將其顯示在表單中。該方法同時還會啟用Delete按鈕，并將記秉的ID嵌入到自定義數據屬性中，這樣便于處理更新操作。Save按鈕會檢測ID是否存在。如果存在，就更新記錄。如果不存在，就認為它是一條新記錄。下面我們來編寫這段邏輯。9.2.7插入、更新和刪除記錄    當用戶單擊Save按鈕的時候，要觸發代碼來進行新數據插入或者更新已有數據。我們將在Save按鈕上添加一個單擊事件處理程序，方法是將下面的代碼添加到iQuery函數中：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);   }});    此方法檢測表單中標題域的data-id屬性。如果沒有ID，表單認為用戶在添加新記錄，便會觸發insertNote方法，此方法如下：