通过JavaScript生成表格

Question

我在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()方法，我已经硬编码要显示的数据。我想要的是，数据应该以正确的表格格式显示。我知道我必须在JavaScript中为动态表格生成创建元素，但我无法这样做，也显示表格中的内容。
每次用户填写表单并单击插入按钮，插入语句执行，然后调用方法showRecords()。我无法弄清楚正确的解决方案。

Answer 1

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