添加到 innerHTML 后未显示 JSON 表数据答案

【问题标题】：JSON table data not showing after adding to innerHTML添加到 innerHTML 后未显示 JSON 表数据
【发布时间】：2020-07-29 18:24:20
【问题描述】：

我正在尝试使用来自谷歌表格 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>

我一遍又一遍，我不知道如何在tableRow.innerHTML = 之后获取<td> 标记之间的其余 JSON 数据以填充表格的其余部分。

我确定这很简单，我没有得到任何帮助，但我们将不胜感激！谢谢

【问题讨论】：

您是否试图通过将其设置为单个表格行来设置整个表格的内容？如果是这样，那就是你的问题。首先，我不会使用innerHTML 来执行此操作——您的示例链接显示他们单独创建行。但是，如果必须，请尝试将 innerHTML 设置为表格的 tbody 而不是单行（例如，tbody.innterHTML）。如果 tbody 不存在，则需要添加它。

标签： javascript html jquery json google-sheets

【解决方案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;”在你的代码中。

【讨论】：

解决了！！因此，将该字符串放入变量中会有所不同。我不太明白为什么，但感谢一百万 Rajkumar。我知道这可能不是使用 JSON 数据构建表的最佳方法，但无论如何，这行得通。
没有。这 ”;”在“条目[i].gsx$position.$t;”的末尾导致问题。

【解决方案2】：

设置表格tbody的innerHTML——而不是行。

注意：我不推荐使用 innerHTML 来执行此操作，但无论如何这里是一个示例。

document.getElementById("bn_insert_body").addEventListener("click", e => {

  const rows = `<tr><td>Body Column 1</td><td>Body Column 2</td><td>Body Column 3</td></tr>
  <tr><td>Body Column 1</td><td>Body Column 2</td><td>Body Column 3</td></tr>`;
  
  document.querySelector("#my_table tbody").innerHTML = rows;
  
});

<table id="my_table">
<thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>

<button type="button" id="bn_insert_body">Insert Data</button>

【讨论】：