Question

我正在尝试使用函数中的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>');

Answer 1

你的桌子没有桌子，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）

Answer 2

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

$.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");   
    });

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

2 个答案: