與jQuery和json填充表

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，然後與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>