javascript - 使用 php 和 ajax 在表中显示查询的值

Question

我的代码有问题，所以我有一个数组并传递给模板，该数组如下所示:

Array
(
[0] => Array
    (
        [ref_article] => 1903
        [ref_fournisseur] => sdsds
        [lien_fournisseur] => www.four.com
        [prix_ht] => 14.00
        [gifts_number] => 3
    )

[1] => Array
    (
        [ref_article] => 1907
        [ref_fournisseur] => sdsds
        [lien_fournisseur] => www.four.com
        [prix_ht] => 12.00
        [gifts_number] => 1
    )

)

现在在模板中我这样做:

for (var item in result) {
    document.getElementById('order_information').setAttribute('class','display-on');
    document.getElementById('order_information').setAttribute('class','table');

    var html = '<td>' + result[item]['ref_article'] + '</td>' +
                '<td>' + result[item]['ref_fournisseur'] + '</td>' +
                '<td>' + 'description' + '</td>'+
                '<td>' + result[item]['lien_fournisseur'] + '</td>' +
                '<td>' + result[item]['prix_ht'] + '</td>'+
                '<td>' + 'disponibilite' + 
                '<td>' + result[item]['gifts_number'] + '</td>';
    $("#content-order").html(html);
    console.log(result[item]['ref_article']);
}

问题是只有最后一个<td></td>页面上显示，在本例中仅显示 [ref_article] = 1907 的文章。我究竟做错了什么？你能帮我吗？提前致谢

Answer 1

问题是因为您使用 html() 添加内容 - 这将覆盖 #content-order 元素中任何预先存在的内容。相反，尝试使用 append():

$("#content-order").append(html);

另请注意，您可以修改前两行以使用 jQuery 选择器和 addClass() 方法:

$('#order_information').addClass('display-on table');

如果您想清除先前请求中添加的信息，可以在附加新内容的 for 循环之前使用 .empty()。这是一个完整的示例:

// $.ajax({...

success: function(result) {
    $("#content-order").empty(); // remove existing content
    $('#order_information').addClass('display-on table');

    for (var item in result) {
        var html = '<td>' + result[item]['ref_article'] + '</td>' +
                '<td>' + result[item]['ref_fournisseur'] + '</td>' +
                '<td>description</td>' + // removed redundant string concatenation
                '<td>' + result[item]['lien_fournisseur'] + '</td>' +
                '<td>' + result[item]['prix_ht'] + '</td>'+
                '<td>disponibilite</td>' + // added missing </td>
                '<td>' + result[item]['gifts_number'] + '</td>';
        $("#content-order").append(html);
        console.log(result[item]['ref_article']);
    }
}