获取的数据未显示在新页面上 (JavaScript/HTML)

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 功能逻辑。 希望对您有所帮助。