从动态页面/表中获取数据

fetch data from a dynamic page/table?

本文关键字：获取 数据 动态      更新时间：2024-01-07

创建动态页面是为了显示从数据库中提取的数据，动态页面还为要在中显示的数据创建了一个表。

然后我有一个按钮（btnJoin），它位于每一组结果下面，该按钮触发一个更新表的函数。

为了更新表，我需要获取用户加入的特定事件，因此，是否可以从按下按钮的特定事件的标题（response.rows.item（I）.title）中获取数据？

我对更新函数的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" );
                                                                                 }
}

您可以将标题添加为按钮的数据属性

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 data（）方法检索属性：

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

演示

相关文章：