专业提供济南网站建设服务,丰富的济南网站设计和济南网站制作经验,为企业公司提供济南网站建设,济南网站设计,济南网站开发,手机网站。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方法，此方法如下：