从 JSON 数据生成 HTML 表答案

【问题标题】：Generate HTML Table from JSON Data从 JSON 数据生成 HTML 表
【发布时间】：2014-06-29 06:46:22
【问题描述】：

如何从 JSON 数据生成 HTML 表格？

我有以下 JSON 数据：

[
  {
    name: "Condition"
    value: "New"
  },
  {
    name: "Year"
    value: "2007"
  },
  {
    name: "Manufacturer"
    value: "Audi"
  },
  {
    name: "Model"
    value: "A4"
  },
  {
    name: "Type"
    value: "Limousine"
  },
  {
    name: "Options"
    value: "Full"
  }
]

我想生成一个像这样的 html 表格：

<table width="779" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td width="104">Condition</td>
    <td width="318">New</td>
    <td width="176">Year</td>
    <td width="171">2007</td>
  </tr>
  <tr>
    <td>Manufacturer</td>
    <td>Audi</td>
    <td>Model</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Type</td>
    <td>Limousine</td>
    <td>Options</td>
    <td>Full</td>
  </tr>
</table>

我需要每行有 2 个对象。在两个对象创建新行后，接下来是 2 个对象，依此类推。

【问题讨论】：

您遍历数据并从中创建 DOM 元素。您可以使用 handlebarsjs.com 之类的模板引擎自动执行此过程，或者使用新的模块 React。
你应该开始写一些东西并发布一些代码作为起点

标签： jquery html json

【解决方案1】：

您的 JSON 数据格式不是最新的，您需要在 'value' 索引前添加 ','。

<!DOCTYPE HTML>
<html lang = "zh">
  <head>
    <meta charset="utf-8" />
    <title>
      jQuery Table
    </title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
  </head>
<body>
    <div id = "divTable"></div>
<script>
var data = [
  {
    name: "Condition"
    , value: "New"
  },
  {
    name: "Year"
    , value: "2007"
  },
  {
    name: "Manufacturer"
    , value: "Audi"
  },
  {
    name: "Model"
    , value: "A4"
  },
  {
    name: "Type"
    , value: "Limousine"
  },
  {
    name: "Options"
    , value: "Full"
  }
];
var html = '<table width="779" border="1" cellpadding="0" cellspacing="0">';
html += '<tr><td width="104">' + data[0].name + '</td><td width="318">' + data[0].value + '</td>';
html += '<td width="176">' + data[1].name + '</td><td width="171">' + data[1].value + '</td></tr>';
for(var i = 2; i < data.length; i++) {
  if(i % 2 == 0)
    html += '<tr>';
  html += createEleHtml(data[i]);
  if(i % 2 == 1)
    html += '</tr>';
}

function createEleHtml(ele){
  if(ele && ele.name) return '<td>' + ele.name + '</td><td>' + ele.value + '</td>';
};

html += '</table>';
$("#divTable").html(html);
</script>
</body>
</html>

【讨论】：