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