javascript - 将 JSON 数据附加到表中的 jQuery 总是将元素放在错误的位置

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 和 td 分隔的 tr 行，否则它们将在追加后自动关闭，例如当你这样做时:

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

希望这对您有所帮助。