jquery - 如何使用 jquery 和 ajax 从数据库中的数据创建 HTML 表格

Question

我正在尝试使用数据库中的信息显示表格。我可以看到我的 console.log 中显示的所有数据，但我不确定如何将其放入表中。

这是我的更新版本。它现在至少显示一个运算符(operator)，但只显示一个运算符(operator)，而不是所有运算符(operator)。我怎样才能让它显示所有运营商？

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