jQuery追加到HTML表格答案

【问题标题】：jQuery append to HTML tablejQuery追加到HTML表格
【发布时间】：2017-10-17 19:27:37
【问题描述】：

我正在尝试使用从 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 等等。

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

【问题讨论】：

您需要创建行和单元格...将单元格附加到行，将行附加到表格。您现在正在做的是将文本附加到单个单元格。
发生这种情况是因为您将数据作为 2 个长字符串附加到 #col1 和 #col2，您必须循环并为每个单元格添加一个 <td></td> 并为每一行添加一个 <tr></tr>或者至少在每个“单元格”之后添加一个<br/>
Using jQuery to build table rows from Ajax response (Json)的可能重复

标签： javascript jquery html

【解决方案1】：

尝试为表中的每个结果动态生成一个新的<tr> 行。下面的示例还将为您动态添加的每个新<td>列提供唯一的ID，例如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;
      }
 });

【讨论】：

它会创建许多具有相同ID的元素，ID必须是唯一的
好的，那么您可以使用 for 循环增加 id。我会更新答案。

【解决方案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，因此完全未经测试）

【讨论】：

为什么valueCell旁边有个美元符号？这是笔误吗？
不——只是我用来暗示我正在处理 jQuery 对象而不是 DOM 对象的标准。

【解决方案3】：

这是一个带有示例 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 表格（即，将 header 和 body 用 thead 和 tbody 分开）。上面的代码将根据响应长度添加行。希望这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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")
}

【讨论】：