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

【问题标题】：How to create a table in HTML from data in a database using jquery and ajax如何使用 jquery 和 ajax 从数据库中的数据创建 HTML 表
【发布时间】：2016-11-17 07:58:15
【问题描述】：

我正在尝试使用数据库中的信息显示表格。我可以看到我的 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);
        }
   });

【问题讨论】：

试试 $("#dataTableDiv").html(result)
@DinoMyte 显示所有数据但不在表格中
'result' 对象是 html 字符串吗？
@DinoMyte 不，不是
您只能将字符串 html 附加到 html 元素。您需要先将对象或 json 字符串转换为 html 字符串

标签： jquery html mysql ajax

【解决方案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);
}

【讨论】：