Table generation through JavaScript

Question

I was using SQLite in html5 and it worked fine. But the thing was the rows which I was displaying in the page itself were not looking that good. I used innerhtml for displaying the rows as inserted by the user. Here is the script

function showRecords() {

    results.innerHTML = '';
    // This function needs a single argument, which is a function that takes
    // care of actually executing the query
    db.transaction(function(tx) {
        tx.executeSql(selectAllStatement, [], function(tx, result) {
            dataset = result.rows;
            for ( var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                results.innerHTML += '<li>' + item['lastName'] + ' , '
                                    + item['firstName']
                                    + ' <a href="#" onclick="loadRecord(' + i
                                    + ')">edit</a>  '
                                    + '<a href="#" onclick="deleteRecord(' + item['id']
                                    + ')">delete</a></li>';
            }
        });
    });
}

/**
 * Loads the record back to the form for updation
 * 
 * @param i
 */
function loadRecord(i) {
    var item = dataset.item(i);
    firstName.value = item['firstName'];
    lastName.value = item['lastName'];
    phone.value = item['phone'];
    id.value = item['id'];
}

/**
 * Delete a particular row from the database table with the specified Id
 * 
 * @param id
 */
function deleteRecord(id) {
    db.transaction(function(tx) {
        tx.executeSql(deleteStatement, [ id ], showRecords, onError);
    });
    resetForm();
}

So in the code showRecords() method, I have hard coded the data to be displayed. What I want is, that data should be displayed in proper tabular format. I know I have to create elements in JavaScript for dynamic table generation but I am unable to do so and also to display the contents inside table.
Everytime user fills up the form and clicks insert button, insert statement gets executed and then showRecords() method is invoked. I am not able to figure out the proper soluton.

Answer 1

For a pure JavaScript solution, I think this (untested) will work:

function loadRecord(i) {
    var item = dataset.item(i);
    firstName.value = item.firstName;
    lastName.value = item.lastName;
    phone.value = item.phone;
    id.value = item.id;
}
function showRecords() {
    results.innerHTML = '';
    // This function needs a single argument, which is a function that takes
    // care of actually executing the query
    db.transaction(function (tx) {
        var i = 0,
            table = document.createElement('table'),
            tbody = document.createElement('tbody');
        tx.executeSql(selectAllStatement, [], function (tx, result) {
            var tr = {},
                tdName = {},
                tdEdit = {},
                tdDel = {},
                span = {},
                aEdit = {},
                aDel = {};
            dataset = result.rows;
            for (i = 0, item = null; i < dataset.length; i += 1) {
                //create new table elements
                tr = document.createElement('tr');
                tdName = document.createElement('td');
                tdEdit = document.createElement('td');
                tdDel = document.createElement('td');
                aEdit = document.createElement('a');
                aDel = document.createElement('a');
                //grab dataset row
                item = dataset.item(i);
                //set the name
                tdName.innerText = item.lastName + ' , ' + item.firstName;
                //create the edit link
                aEdit.href = '#';
                aEdit.onclick = loadRecord(i);
                aEdit.innerText = ' edit ';
                tdEdit.appendChild(aEdit);
                //create the delete link
                aDel.href = '#';
                aDel.onclick = deleteRecord(item.id);
                aDel.innerText = ' delete ';
                tdDel.appendChild(aDel);
                //append to row
                tr.appendChild(tdName);
                tr.appendChild(tdEdit);
                tr.appendChild(tdDel);
                //append to body
                tbody.appendChild(tr);
            }
        });
        table.appendChild(tbody);
        results.innerHTML = table.outerHTML;
    });
}
/**
 * Delete a particular row from the database table with the specified Id
 * 
 * @param id
 */
function deleteRecord(id) {
    db.transaction(function (tx) {
        tx.executeSql(deleteStatement, [id], showRecords, onError);
    });
    resetForm();
}