Question

I am currently using phonegap and trying to display results from a sqlite table to a html table through javascript. What should I do to make this possible?

    // callback function to retrieve the data from the prefs table
celebsDataHandler=function(transaction, results) {
  // Handle the results 
  var html = "<ul>"; 
  for (var i=0; i<results.rows.length; i++) { 
    var row = results.rows.item(i); 
    html += '<li>'+row['name']+'</li>\n';
  } 
  html +='</ul>';
  alert(html);
}


// load the currently selected icons
loadCelebs = function() {
  try {

    mydb.transaction(
        function(transaction) {
           transaction.executeSql('SELECT * FROM celebs ORDER BY name',[], celebsDataHandler, errorHandler);
        });

  } catch(e) {
    alert(e.message);
  }

}

From http://wiki.phonegap.com/w/page/16494756/Adding-SQL-Database-support-to-your-iPhone-App

so the resultant is celebsDataHandler. How can I manipulate the data stored inside to display in html table(probably using a for loop or ..?)?

Answer 1

Okay, then try to use this function:

c3.table = function(data,target,className){
    if(typeof target != 'object'){
    return(null);
    }
    var table = document.createElement('table');
    if(typeof className != 'undefined'){
        table.setAttribute('className', className);
    }
    target.appendChild(table);
        var thead = document.createElement('thead');
        var tr = document.createElement('tr');
        thead.appendChild(tr)
        table.appendChild(thead);
        for (key in data[0]){
        if (data[0].hasOwnProperty(key)) {
            var th = document.createElement('th');
            th.innerHTML = key;
            tr.appendChild(th);
        }
        }
        for (row in data){
        var tbody = document.createElement('tbody');
        var tr = document.createElement('tr');
        tbody.appendChild(tr)
        table.appendChild(tbody);
        var currentRow = data[row];
        for (column in currentRow){
            if (currentRow.hasOwnProperty(column)){
            var td = document.createElement('td');
            td.column = column;
            td.innerHTML = currentRow[column];
            tr.appendChild(td);
            }
        }
        }
    }