通过列表ajax加载表

Question

我正试图通过post ajax加载表，但是加载不正确。

table：

<table class="table table-responsive table-hover table-striped" id="tableestoque" style="font-size:12px;">
                <thead>
                    <tr>
                        <th>Nome Empresa</th>
                        <th>Qtd</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

这是我的加载方式：

$.each(data.listaEstoque, function (i, item) {
                $("#tableestoque").append("<tr"
                    + "<td>" + item.empresaProduto.nome + "</td>"
                    + "<td>" + item.qtd + "</td>"
                    + "</tr>")
            });

它是这样加载的，我希望您将每个加载到一列中，如果您有更多行，请在一行中加载。

Answer 1

我为您创建了示例fiddle。现在，您正在遍历每个元素，而不是遍历每个对象。您应该使用forEach语句遍历对象。

var data = [{
  id: 1,
  name: 'Name1'
}, {
  id: 2,
  name: 'Name2'
}];
var $table = $("#tableestoque");
var $tr, $td1, $td2;

data.forEach(function(item) {
  $tr = $('<tr>');
  $td1 = $('<td>' + item.id + '</td>');
  $td2 = $('<td>' + item.name + '</td>');
  $tr.append($td1).append($td2);
  $table.append($tr);
});

Answer 2

您似乎需要像这样将html附加到<tbody>：

$.each(data.listaEstoque, function (i, item) {
                $("#tableestoque tbody").append("<tr"
                    + "<td>" + item.empresaProduto.nome + "</td>"
                    + "<td>" + item.qtd + "</td>"
                    + "</tr>")
            });