javascript - 添加到innerHTML后JSON表数据不显示

Question

我正在尝试使用来自 Google Sheets URL 的 JSON 数据构建一个简单的表。 我让它在另一个实例中工作，使用相同的 JSON 数据填充网格中的 div。

但是当我应用相同的原理来构建表格时，我只能显示第一行 - 请参阅此处:

var url = '[json feed]';

$.getJSON(url, function appendData(data) {

  var tableContent = document.getElementById("content");

  var entries = data.feed.entry;
  console.log(entries);

  for (var i = 0; i < entries.length; i++) {

    var tableRow = document.createElement("tr");

    tableRow.innerHTML = '<td>' + entries[i].gsx$position.$t; + '</td><td>' + entries[i].gsx$team.$t; + '</td><td>' + entries[i].gsx$weeklyscore.$t; + '</td><td>' + entries[i].gsx$totals.$t; + '</td>';

    tableContent.appendChild(tableRow);

  };
});

table {
  border: 1px solid black;
}

td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <tbody id="content">
      <tr>
        <th>Position</th>
        <th>Team</th>
        <th>Weekly Score</th>
        <th>Totals</th>
      </tr>

    </tbody>
  </table>
</div>

我已经一遍又一遍地研究它，但我不知道如何获取 <td> 之间的其余 JSON 数据。 tableRow.innerHTML = 之后的标签填充表的其余部分。

我确信这是我没有得到的简单的东西，但任何帮助将不胜感激!谢谢

Answer 1

请尝试一下，

var tableRow = document.createElement("tr");
              
var str = '<td>' + entries[i].gsx$position.$t + '</td><td>' + entries[i].gsx$team.$t + '</td><td>' + entries[i].gsx$weeklyscore.$t + '</td><td>' + entries[i].gsx$totals.$t + '</td>';
tableRow.innerHTML = str;
tableContent.appendChild(tableRow);

还有一个额外的 ;在所有“$t”中，例如“$t;”在您的代码中。