How to display data to HTML using javascript

问题

I have a problem for displaying the data to HTML using javascript. The code that i create only display the latest data instead of the whole data. I use phonegap in my development. Here is the code:

 var oldHtml = document.getElementById("favorite-table-id").innerHTML;

 for(var i=0; i<courseIdResult.length;i++) {
    //var idResult = courseIdResult[i];
    db.transaction(
            function(tx) {
                var query='SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id='+courseIdResult[i];
                tx.executeSql(query,[],function(tx,resultSet) {
                    console.log("Test 0");
                    var row = resultSet.rows.item(0);
                    var newHTML = "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                      "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                      "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                      "</td> </tr> </table> </td> </tr>";
                    document.getElementById("favorite-table-id").innerHTML= oldHtml + newHTML;
                },errorCB);
            },errorCB
        );
}

variable courseIdResult is an ID for my query and i am using loop to get the data. However, everytime the loop progress, the value of document.getElementById("favorite-table-id").innerHTML is always overwrite. Please help me to solve this problem.

Thank you

回答1:

var q = "";
for (var i = 0; i < courseIdResult.length; i++) {
    q += (q == "" ? "" : ", ") + "?";
}
var query = 'SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id IN (' + q + ')';
var db = CreateDB();
var row = '';
db.transaction(populateDB, errorDB, successDB);
function populateDB(tx) {
    tx.executeSql(query, courseIdResult, function (tx, results) {
        var len = results.rows.length;
        var arrSectionTableName = [];
        if (len > 0) {
            $("#favorite-table-id").empty();
            var newHTML = "";
            for (var i = 0; i < len; i++) {
                 newHTML += "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                  "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                  "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                  "</td> </tr> </table> </td> </tr>";
            }
            $('#"favorite-table-id"').val(newHTML);
           //Refresh your control,eg if it is a listview
            $('#favorite-table-id').listview('refresh');
        }
    });
}
function errorDB(err) {
    alert("Error processing SQL " + err.message);
}
function successDB() {

}

回答2:

append your old html to new hTML before inserting the HTML content in place holder.

var oldHtml = document.getElementById("favorite-table-id").innerHTML;

 for(var i=0; i<courseIdResult.length;i++) {
//var idResult = courseIdResult[i];
db.transaction(
        function(tx) {
            var query='SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id='+courseIdResult[i];
            tx.executeSql(query,[],function(tx,resultSet) {
                console.log("Test 0");
                var row = resultSet.rows.item(0);
                var newHTML = oldHtml + "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                  "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                  "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                  "</td> </tr> </table> </td> </tr>";
                document.getElementById("favorite-table-id").innerHTML= newHTML;
            },errorCB);
        },errorCB
    );

}

来源：https://stackoverflow.com/questions/20698779/how-to-display-data-to-html-using-javascript