如何从 JSON 对象数据制作 HTML 表格答案

【问题标题】：How to make HTML table from JSON objects data如何从 JSON 对象数据制作 HTML 表格
【发布时间】：2017-09-27 01:43:04
【问题描述】：

我正在尝试使用函数中的 for 循环从 JSON 对象 数据创建一个 HTML 表。下面是我的代码的关键部分，它显然没有按预期工作，我正在努力弄清楚。

var table = ''

var forLoopData = function() {
  for (j=0; j<dataJson.length; j++) {
    table += '<tr';

    for(var i=0; i<6; i++)  {
      table += "<td>" dataJson[i].id "</td>" "<td>"dataJson[i].firstName"</td>" "<td>"dataJson[i].lastName"</td>" "<td>"dataJson[i].dateOfBirth"</td>" "<td>"dataJson[i].function"</td>" "<td>"dataJson[i].experience"</td>";
    }

    table += </tr>
  }
};

forLoopData();
document.write('<table>' + table + '</table>');

【问题讨论】：

错字：table += '<tr' 缺少结尾 >。
而table += </tr> 缺少引号。
您缺少table += "<td>" 行上的所有连接运算符。您必须使用+ 将字符串与变量连接起来，您不能像这样将它们彼此相邻。你真的需要阅读 Javascript 教程来学习基础知识。

标签： javascript html json html-table

【解决方案1】：

感谢大家帮助我。不幸的是，我放弃了这个想法，没有机会测试你的答案。将 vanilla JavaScript 与 html 元素结合起来对我来说仍然很困难，我决定使用引导框架。以下是我使用的代码：

$.getJSON("data.json", function(data){
        var items = [];
        $.each(data, function(key, val){
            items.push("<tr>");
            items.push("<td id =''"+key+"''>"+val.id+"</td>");
            items.push("<td id =''"+key+"''>"+val.firstName+"</td>");
            items.push("<td id =''"+key+"''>"+val.lastName+"</td>");
            items.push("<td id =''"+key+"''>"+val.dateOfBirth+"</td>");
            items.push("<td id =''"+key+"''>"+val.function+"</td>");
            items.push("<td id =''"+key+"''>"+val.experience+"</td>");
            items.push("</tr>");
        });
        $("<tbody/>", {html: items.join("")}).appendTo("table");   
    });

【讨论】：

【解决方案2】：

您的表格缺少 table、tbody 和 tr 标签。

<table>
   <tbody>
      <tr>
          <td>dataJson[i].id</td>
          <td>dataJson[i].firstName</td>
          <td>dataJson[i].lastName</td>
       </tr>
    </tbody>
</table>

这是您需要构建的。

方法如下：

var table = "<table><tbody>";

for(var i=0; i<6; i++)  {
  table += "<tr>" ;
  table += "<td>" + dataJson[i].id "</td>" ;
  table += "<td>" + dataJson[i].firstName + "</td>" ;
  table += "<td>" + dataJson[i].lastName + "</td>" ;
  table += "</tr>" ;
}
table += "</tbody></table>";

准备好表格后，您可以使用 document.write(table)

【讨论】：

他这里有table标签：document.write('<table>' + table + '</table>')
他在这里有tr 标签，但有一个错字：table += '<tr';
<tbody> 是可选的。