如何使用jquery和ajax從數據庫中的數據創建HTML表格

Question

我試圖使用來自數據庫的信息來顯示錶格。我可以看到我的console.log中顯示的所有數據，但我不知道如何將其放入表格中。

這裏是我的更新版本。它現在顯示至少一個操作員，但只有一個操作員，而不是全部。我怎樣才能讓它顯示所有的操作員？

function displayDataTable(index){ 

allocationDataAjax = $.ajax({ 
    type: "POST", 
    url: "./qry/getAllocationData.php", 
    async: true, 
    data: {ModelId: control.settings.modelId}, 
    success: function(result){ 
     allocationData = JSON.parse(result); 

     for (i=0;i<allocationData.length;i++){ 
      //console.log(allocationData["SystemName"][i], allocationData["Operator"][i]); 
      var operator = allocationData["SystemName"][i]; 
      console.log(operator); 
     } 

     $("#dataTableDiv").html(allocationData); 
     $("#pageOverlay").empty(); 
      html = "<div id='dataTableDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th><th>header 6</th></thead></tr><tbody><tr><td>" + operator + "</td></tr></tbody></table><input type='button' value='Close' onclick='closeOverlay()'>&nbsp;&nbsp;<input type='button' id='exportDataTable' value='Export Table'></div>"; 
     $("#pageOverlay").html(html); 
     } 
    }); 

Answer 1

這裏是我的答案，以防萬一別人運行到這個問題在未來

function displayDataTable(index){ 

    allocationDataAjax = $.ajax({ 
     type: "POST", 
     url: "./qry/getAllocationData.php", 
     async: true, 
     data: {ModelId: control.settings.modelId}, 
     success: function(result){ 
     allocationData = JSON.parse(result); 

     $("#pageOverlay").empty(); 

     html = "<div id='dataTableDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></thead></tr><tbody>"; 

     for (i=0;i<allocationData.length;i++){ 
      //console.log(allocationData); 
      //console.log(allocationData["SystemName"][i], allocationData["Operator"][i]); 

      html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>"; 

     } 

     html += "</tbody></table><input type='button' value='Close' onclick='closeOverlay()'>&nbsp;&nbsp;<input type='button' id='exportDataTable' value='Export Table'></div>"; 

     $("#pageOverlay").html(html); 
}