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）。以上代码将根据响应长度添加行。希望这可以帮助。