Question

我正在尝试使用JSON数据源和javascript编写一个简单的表。我有数据和循环工作，但是当在函数末尾写入HTML时，只将文本放入DOM，而不是我将文本包装进的标签。在我的example shown here中，我包括了console.log因此您可以看到DOM不包含<tr>和</tr>，但变量确实存在，因为它是在控制台中打印的。

我怀疑这是innerHTML方法存在的问题，但我无法弄清楚我的例子和我发现的一些工作示例之间的区别。

更新以包含代码示例：

<table>
    <td id="web">
    </td>
</table>

<script>
var cv = {
  "webinars": [
    { "title": "Zombies Ate My Neighborhood" },
    { "title": "Pacman Fever" },
    { "title": "Googleplex" }
  ]
};

function writeTable() { 
    var table = "";
    cv.webinars.forEach (function(item) {
        table += "<tr>" + item.title + "</tr>" + "\n";
    });
    console.log(table);
    node = document.getElementById("web");
    node.innerHTML = table;
}

writeTable();
</script>

Answer 1

两件事。一，TD进入TRs。二，你不能设置TR的innerHTML，因为它只在IE中读取。为了以跨浏览器兼容的方式执行您想要的操作，可以在字符串中构建整个表，并设置容器的innerHTML，如DIV。或者，您可以创建表元素并将它们附加到DOM。

Answer 2

您使用<tr>代替<td>而反之亦然。 <td>是一个单元格，必须进入<tr>（表格行）。

Demo

Answer 3

尝试

<table>
  <tbody id="web">
  </tbody>
</table>


<script>
var cv = {
  "webinars": [
    { "title": "Zombies Ate My Neighborhood" },
    { "title": "Pacman Fever" },
    { "title": "Googleplex" }
  ]
};

function writeTable() { 
    var table = "";
    cv.webinars.forEach (function(item) {
        table += "<tr>" + item.title + "</tr>" + "\n";
    });
    console.log(table);
    node = document.getElementById("web");
    node.innerHTML = table;
}

writeTable();
</script>

innerHTML显示文本但不显示HTML

3 个答案: