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，依此类推。

PS答案应包括$.getJSON(api, data) ，不包括$.parseJSON(data)或$.each(data))或success: function (data))

Answer 1

尝试为表中的每个结果动态生成一个新的<tr>行。 下面的示例还将为您动态添加的每个新<td>列（例如col-1, col-2等）提供唯一的ID。

 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

这是带有示例JSON文件的解决方案。

JS Fiddle演示

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分隔标题和正文）。 上面的代码将根据响应长度添加行。 希望这可以帮助。

Answer 4

这是我的方法，创建一个模板，然后用值替换变量，我注释掉了主行并制作了一个模型演示。

 //$.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 5

为每个记录追加一行和单元格：

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")
}