動的ページ/テーブルからデータを取得しますか？

Question

動的ページがデータベースからフェッチされたデータを表示するために作成され、動的ページはまた、提示されるデータのためのテーブルを作成する。

Iは、結果のすべてのセットの下にあるボタン（btnJoin）を有しますボタンは、テーブルを更新する関数をトリガします。

テーブルを更新するには、ユーザーが参加する特定のイベントをフェッチする必要があるため、特定のイベントのタイトル（response.rows.item（i）。タイトル）からデータをフェッチすることができます。押し付けられましたか？

ようになるはずです更新機能のための私のSQLクエリ：

tx.executeSql("Update soccerevents SET NoPeople = NoPeople +1 WHERE Title = '" + response.rows.item(i).Title + "'", [], successJoin,errorCB); 

のJavaScript（動的ページ/表）：あなたは、ボタンのデータ属性としてタイトルを追加することができ

function fetchEvent() { 
    db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024); 
    db.transaction(function(tx) { 
    var TitleT = document.getElementById("texttitle").value; 
    tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], successCBValue, errorCB); 
     }); 
function successCBValue(tx, response, page_id) { 
    var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>"; 
    for (var i = 0; i < response.rows.length; i++) { 
    formElements += "<tr><td>" 
     + response.rows.item(i).Title + "</td><td>" 
     + response.rows.item(i).Location +"</td><td>" 
     + response.rows.item(i).NoPeople + "</td><td>" 
     + response.rows.item(i).Date +"</td><td>" 
     + response.rows.item(i).Description + "<button data-rowtitle='" + response.rows[i].Title + "' data-mini='true' class='btnJoin'>Join</a></td></tr>"; 
     } 
    formElements+="</tbody></table>"; 
     alert("For better viewing of events, tilt phone landscape."); 
    $('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + '<a href="#page4" data-role="button" data-mini="true">Return</a></div></div>'); 
    $.mobile.initializePage(); 
    $.mobile.changePage("#" + page_id); 
     $(document).on("click", ".btnJoin", function(e){ 
        var title = $(this).data("rowtitle"); 
        alert(title); 
       }); 
    } 
} 
function updateEvent() { 
     var title = document.getElementById("rowtitle"); 
     db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024); 
     db.transaction(function(tx) { 
     tx.executeSql("Update soccerevents SET NoPeople = NoPeople +1 WHERE Title = '" + title + "'", [], successJoin,errorCB); 
       }); 
     function successJoin() { 
     navigator.notification.alert("You have joined the event!", null, "Information", "ok"); 
     $(":mobile-pagecontainer").pagecontainer("change", "#page4"); 
                       } 
} 

Answer 1

for (var i = 0; i < response.rows.length; i++) { 
    formElements += "<tr><td>" + response.rows[i].Title + "</td><td>" + 
    response.rows[i].Location +"</td><td>" + 
    response.rows[i].NoPeople + "</td><td>" + 
    response.rows[i].Date +"</td><td>" + 
    response.rows[i].Description + 
    "<button data-rowtitle='" + response.rows[i].Title + "' class='btnJoin' >Click me</button></td></tr>"; 
} 

次に、ボタンクリックハンドラで、jQueryデータを使用して属性を取得します（ ）方法：

$(document).on("click", ".btnJoin", function(e){ 
    var title = $(this).data("rowtitle"); 
    alert(title); 
}); 

DEMO