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

Question

我正试图使用谷歌表单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数据来填充表的其余部分。

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

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"在您的代码中。

Answer 2

设置表的tbody的内部HTML，而不是行。

注意：我不建议使用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>