Javascript jQuery将JSON数据附加到表中会使元素一直放在错误的位置

我想用从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>');
        },  
    });
}

var container=$（“#container”）；
var表=$（“#表”）；
$（文档）.ready（函数（）{
callAPI（）；
});
函数callAPI（）{
$.ajax({
url:“action api.php”，
方法：“获取”，
数据类型：“json”，
成功：函数（数据）{
控制台日志（数据）；
container.append（'IDNaam BrouwerijTypeGistingPercentageInkoop Prijs'）；
$。每个（数据、功能（i、项）{
container.append（“”+item.id+“”）；
容器。附加（“”+item.naam+“”）；
容器。追加（“”+item.brouwerij+“”）；
container.append（“”+item.type+“”）；
容器。附加（“”+item.gisting+“”）；
容器。附加（“”+item.perc+“”）；
container.append（“”+item.inkoop_prijs+“”）；
});
容器。附加（“”）；
},  
});
}

这是HTML输出：

---

您必须创建

表和
td
分隔的行
tr
，否则它们将在追加后自动关闭，例如：

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

container.append（“”+item.id+“”）；

输出将是：

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

item.id
____________________^^^^^//注意：关闭的标记将自动添加

所以你只需要像这样把它们分开：

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

var表=$（''）；
表.append（'IDNaam BrouwerijTypeRegistingPercentageInkoop Prijs'）；
$。每个（数据、功能（i、项）{
var tr=$（''）；
tr.append（“”+item.id+“”）；
tr.append（“”+item.naam+“”）；
tr.append（“”+item.brouwerij+“”）；
tr.append（“”+item.type+“”）；
tr.append（“”+项目注册+“”）；
tr.append（“”+item.perc+“”）；
tr.append（“”+item.inkoop_prijs+“”）；
表3.追加（tr）；
});
container.append（表）；

希望这有帮助。
或者您可以创建整个bloc，然后附加它：

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

var container=$（“#container”）；
var表=$（“#表”）；
$（文档）.ready（函数（）{
callAPI（）；
});
函数callAPI（）{
$.ajax({
url:“action api.php”，
方法：“获取”，
数据类型：“json”，
成功：函数（数据）{
控制台日志（数据）；
var html='IDNaam BrouwerijTypeRegistingPercentageInkoop Prijs'；
$。每个（数据、功能（i、项）{
html+=''+item.id+''；
html+=''+item.naam+''；
html+=''+item.brouwerij+''；
...
});
html+=''；
container.append（html）；
},  
});
}

以下是对此的解释：
也测试了您的答案，您的答案也有效，非常感谢！没问题！当做