jQuery追加到HTML表

Question

我想用Ajax請求返回的數據填充一個空白表。該表格填充在正確的列內，但是所有數據數據都被聚集起來（以長字符串形式）並且所有利率數據都聚集在一起（以長字符串形式）。儘管如此，Console.log()行完美並顯示每個項目，枚舉，都在單獨的行。

我的代碼如下：

HTML

<table id="table" border="1"> 
    <tr> 
     <th>Date</th> 
     <th>Value</th> 
    </tr> 
    <tr> 
     <td id='col1'></td> 
     <td id='col2'></td> 
    </tr> 
    </table> 

的Javascript/jQuery的

$.getJSON("api", function(data) { 
    for (var x =1; x <= data.count -1 ; x++){ 
     $("#col1").append(data.observations[x].date); 
     $("#col2").append(data.observations[x].value); 
     console.log(x, data.observations[x].date, data.observations[x].value); 
     } 
}) 

我怎樣才能把它改寫，使每個日期和利率是在一個單獨的一行。示例：row1：date1和value1，row2：date2和value2等。

P.S.答案應該包括$.getJSON(api, data) 和 不包括$.parseJSON(data)或$.each(data))或success: function (data))

Answer 1

嘗試動態地生成新的<tr>一行的表中的每個結果。下面的例子還會給你每個新的<td>列的動態的唯一標識。 col-1, col-2等

var i = 1; 
 
var j = 2; 
 

 
for(i=1; i<=10; i++) 
 
{ 
 
    $("#table").append("<tr><td id='col-" + i + "'>" + "col-" + i + "</td><td id='col-" + j + "'>" + "col-" + j + "</td></tr>"); 
 
    
 
    i++; 
 
    j = j+2; 
 
}

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

而且你的腳本會是這樣的：

$.getJSON("api", function(data) 
{ 
    var x = 1; 
    var z = 2; 

    for (x =1; x <= data.count -1 ; x++){ 
     $("#table").append("<tr><td id='col" + x + "'>" + data.observations[x].date + "</td><td id='col" + z + "'>" + data.observations[x].value + "</td></tr>"); 

     x++; 
     z = z+2; 
     } 
}); 

Answer 2

$.getJSON("api", function(data) { 
 
    var $table = $("#table") 
 
     
 
    for (var x =1; x <= data.count -1 ; x++){ 
 
     var $row = $("<tr>"), 
 
     dateCell = $("td").text(data.observations[x].date), 
 
     valueCell = $("td").text(data.observations[x].value) 
 
     $row.append(dateCell).append($valueCell) 
 
     $table.append($row) 
 
     
 
     console.log(x, data.observations[x].date, data.observations[x].value); 
 
     } 
 
})

<table id="table" border="1"> 
 
    <tr> 
 
     <th>Date</th> 
 
     <th>Value</th> 
 
    </tr> 
 
    <tr> 
 
     <td id='col1'></td> 
 
     <td id='col2'></td> 
 
    </tr> 
 
    </table>

（因爲我沒有獲得牛逼您的API，這是完全未經測試）

Answer 3

這裏是我的方法，做一個模板，然後用值替換變量，我已經註釋掉了主線，並做了一個模擬演示。

//$.getJSON("api", function(data) { 
 
var data = [1,2,3,4]; 
 
    for (var x of data){ 
 
     //var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', data.observations[x].date).replace('$2', data.observations[x].value); 
 
     var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', 1).replace('$2', 2); 
 
     $('#table').append(html); 
 
     //console.log(x, data.observations[x].date, data.observations[x].value); 
 
     } 
 
//})

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

Answer 4

追加一行，細胞每一個記錄：

for (var x=0 ; x<data.count ; x++){ 
    var obs = data.observations[x]; 
    $('<tr/>').append(
    $("<td/>").text(obs.date), 
    $("<td/>").text(obs.value) 
).appendTo("#table") 
} 

Answer 5

下面是一個樣本JSON文件的解決方案。

JS Fiddle DEMO

HTML代碼：

<table id="table" border="1"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
    </table> 

JS：

onSuccess: function (response) { 
      response.forEach(function(row) { 
     $('table#table tbody').append("<tr class='tablerow'><td class='col1'>"+row.date+"</td><td class='col2'>"+row.value+"</td></tr>"); 
     }); 
    } 

您可能需要更改HTML表格，以及（即由THEAD的頭和身體分離， TBODY）。以上代碼將根據響應長度添加行。希望這可以幫助。