通过JavaScript生成表

我在html5中使用SQLite，效果很好。但问题是，我在页面中显示的行本身看起来不太好。我使用innerhtml显示用户插入的行。 这是剧本

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();
}

函数showRecords（）{
results.innerHTML=''；
//此函数需要一个参数，该参数为
//注意实际执行查询
数据库事务（功能（tx）{
tx.executeSql（selectAllStatement，[]，函数（tx，result）{
数据集=result.rows；
对于（var i=0，item=null；i”；
}
});
});
}
/**
*将记录加载回表单进行更新
* 
*@param i
*/
函数加载记录（i）{
var item=dataset.item（i）；
firstName.value=项['firstName']；
lastName.value=项['lastName']；
phone.value=项目['phone']；
id.value=项目['id']；
}
/**
*从数据库表中删除具有指定Id的特定行
* 
*@param-id
*/
函数删除记录（id）{
数据库事务（功能（tx）{
tx.executeSql（deleteStatement，[id]，showRecords，onError）；
});
resetForm（）；
}

因此，在code

showRecords（）

方法中，我硬编码了要显示的数据。我想要的是，数据应该以适当的表格格式显示。我知道我必须在JavaScript中创建元素以生成动态表，但我无法这样做，也无法显示表中的内容。

---

每次用户填写表单并单击“插入”按钮时，都会执行insert语句，然后调用

showRecords（）

方法。我无法找到合适的解决方案。

对于纯JavaScript解决方案，我认为这（未经测试）将起作用：

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();
}

函数加载记录（一）{
var item=dataset.item（i）；
firstName.value=item.firstName；
lastName.value=item.lastName；
phone.value=item.phone；
id.value=item.id；
}
函数showRecords（）{
results.innerHTML=''；
//此函数需要一个参数，该参数为
//注意实际执行查询
数据库事务（功能（tx）{
var i=0，
table=document.createElement（'table'），
tbody=document.createElement（'tbody'）；
tx.executeSql（selectAllStatement，[]，函数（tx，result）{
var tr={}，
tdName={}，
tdEdit={}，
tdDel={}，
span={}，
aEdit={}，
阿德尔={}；
数据集=result.rows；
对于（i=0，item=null；i