用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>