用jquery和json填充表

Question

我想用json数据填充现有表。 我在stackoverflow上找到了一个示例，该示例仅执行一列数据。 json数据具有三组数据，显然需要三列。 我只试验了一行，但是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);

    });
}

浏览器中的输出：167167167

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

Answer 1

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

我认为您想要实现的是此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>