Question

我正在尝试从查询中获取的数据显示在不同的页面上，但数据未显示在新页面上。

正在显示的表格与搜索在同一页面上正确显示数据，但是当我尝试更改内容以便数据显示在新页面上时，它无法正常工作。

我正在使用JQuery mobile，因此它是一个单页结构（index.html下的所有页面），我将所有javascript都放在一个单独的文件中。

有人能在这看到这个问题吗？

获取数据功能：

    function fetchEvent()
             {
          db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
          db.transaction(foundEvent, errorCB);
         }

          function foundEvent(tx)
            {
            var TitleT = document.getElementById("texttitle").value;
           tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent);
                        }

function renderEvent(tx, response) {
   /* var div = document.getElementById("responsediv"); */
    var temp = "<table border=\"1\"><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";

    for (var i = 0; i < response.rows.length; i++) {
        temp += "<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 + "</td></tr>";
         /* div.innerHTML = temp; */
    }
    var page6 = window.open("#page20", "mywin", '');
    page6. dataFromParent = temp;
    page6.render();
}
    var dataFromParent;
    function render() {
        $('datadisplay').innerHTML(dataFromParent);
    }

HTML（第6页）：

    <div data-role="page" id="page20" data-theme="d">

    <div data-role="content">
        <div id="datadisplay">
        </div>
    </div>
</div>

Answer 1

for (var i = 0; i < response.rows.length; i++) {
        temp += "<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 + "</td></tr>";
         /* div.innerHTML = temp; */
    }

好的，所以你想要一个不同的页面来显示你的数据，当你移动到另一个页面响应对象时，你的数据就会丢失。我建议你做一个新的页面。这一行。

 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 + "<a href='map.html' rel='external' data-ajax='false' data-role='button' data-mini='true'>View on Map</a></td></tr>";
                        }

                formElements+="</tbody></table>";
                $('#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);

page_id是动态页面的特定ID，您可以设置

现在你可能需要根据你做一些自定义。但逻辑是你从头开始制作一个完整的div并附加它。现在你需要编写一个函数FORWARD（），它将具有你的导航和BACK的逻辑，它将具有你的BACK功能的逻辑。希望它有所帮助。

提取的数据未显示在新页面上（JavaScript / HTML）

1 个答案: