Question

我想用json数据填充现有表。我在stackoverflow上找到了一个例子，它只使用一列数据。 json数据有三组数据，显然需要3列。我只尝试了一行，但jquery代码（下面）错误地显示了表。

<table class="table">
<tr id="row1">
<td = "col1"></td>
<td = "col2"></td>
<td = "col3"></td>

function myFunction() { 

    data = [{"indx":1,"amt":234.56,"vendor":11,"jDate":167},
            {"indx":2,"amt":3345.4,"vendor":22,"jDate":168}];

    $.each(data, function(key, value) {
        $("#row1").eq(key).find('td').text(value.indx);
        $("#row1").eq(key).find('td').text(value.amt);
        $("#row1").eq(key).find('td').text(value.jDate);

    });
}

输出浏览器：167 167 167

显示所有三列中的最后一个字段。任何建议如何让表格显示正确的值将不胜感激。

Answer 1

您的代码正在使用value.indx更新所有CELLS，然后使用value.amt更新，最后使用value.jDate ...更快，您只能看到最终结果。

我认为你想要达到的目标更像是this CodePen：

function myFunction() { 

    data = [{"indx":1,"amt":234.56,"vendor":11,"jDate":167},
            {"indx":2,"amt":3345.4,"vendor":22,"jDate":168}];

    $.each(data, function(key, value) {
        $("table").find('tr').eq(key).find("td").eq(0).text(value.indx);
        $("table").find('tr').eq(key).find("td").eq(1).text(value.amt);
        $("table").find('tr').eq(key).find("td").eq(2).text(value.jDate);

    });
}
myFunction();

Answer 2

显然，您必须动态地将行添加到表中，因为您的数据数组可能包含不同数量的对象。试试这个代码。

这里我们有一个表，其中填充了数据数组的每个元素的新行。

data = [{"indx":1,"amt":234.56,"vendor":11,"jDate":167},
        {"indx":2,"amt":3344.4,"vendor":22,"jDate":168},
        {"indx":3,"amt":1414.1,"vendor":21,"jDate":169},
        {"indx":4,"amt":3441.3,"vendor":31,"jDate":1610}];

$.each(data, function(key, value) {
  var tr = $("<tr>");
  tr.append($("<td>").text(value.indx));
  tr.append($("<td>").text(value.amt));
  tr.append($("<td>").text(value.vendor));
  tr.append($("<td>").text(value.jDate));
  $("#table").append(tr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
</table>

用jquery和json填充表

2 个答案: