如何使用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); 
}