Question

我想创建一个包含从我的API检索到的JSON数据的表，但是jQuery一直将元素放在错误的位置....

这是我的jQuery代码：

var container = $("#container");
var table = $("#table");

$(document).ready(function() {
    callAPI();
});

function callAPI() {
    $.ajax({
        url: "action-api.php",
        method: "GET",
        dataType: 'json',
        success: function(data) {   
            console.log(data);
            container.append('<table style="width:100%"><tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>');

            $.each(data, function(i, item) {
                container.append('<tr><td>' + item.id + '</td>');
                container.append('<td>' + item.naam + '</td>');
                container.append('<td>' + item.brouwerij + '</td>');
                container.append('<td>' + item.type + '</td>');
                container.append('<td>' + item.gisting + '</td>');
                container.append('<td>' + item.perc + '</td>');
                container.append('<td>' + item.inkoop_prijs + '</td></tr>');
            });

            container.append('</table>');
        },  
    });
}

这是HTML输出：

Answer 1

您必须创建table和tr分隔的行td，否则它们会在追加后自动关闭，例如当您执行以下操作时：< / p>

container.append('<tr><td>' + item.id + '</td>');

输出将是：

<tr><td>item.id</td></tr>
____________________^^^^^ //NOTE the closed tag will be added automatically

所以你只需将它们分开：

var table = $('<table style="width:100%"></table>');

table.append('<tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>');

$.each(data, function(i, item) {
    var tr = $('<tr/>');

    tr.append('<td>' + item.id + '</td>');
    tr.append('<td>' + item.naam + '</td>');
    tr.append('<td>' + item.brouwerij + '</td>');
    tr.append('<td>' + item.type + '</td>');
    tr.append('<td>' + item.gisting + '</td>');
    tr.append('<td>' + item.perc + '</td>');
    tr.append('<td>' + item.inkoop_prijs + '</td>');

    table.append(tr);
});

container.append(table);

希望这有帮助。

Answer 2

或者您可以创建整个集团然后追加它：

var container = $("#container");
var table = $("#table");

$(document).ready(function() {
    callAPI();
});

function callAPI() {

    $.ajax({
        url: "action-api.php",
        method: "GET",
        dataType: 'json',
        success: function(data) {   
            console.log(data);
            var html = '<table style="width:100%"><tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>';

            $.each(data, function(i, item) {
                html+='<tr><td>' + item.id + '</td>';
                html+='<td>' + item.naam + '</td>';
                html+='<td>' + item.brouwerij + '</td>';
                ...
            });

            html+='</table>';
          container.append(html);
        },  
    });
}

以下是对此的解释：How do I force jQuery append to NOT automatically close a tag?

jQuery将JSON数据附加到表继续将元素放在错误的位置

2 个答案: