Jquery 从JSON数据生成HTML表_Jquery_Html_Json

Jquery 从JSON数据生成HTML表

jquery html json

Jquery 从JSON数据生成HTML表,jquery,html,json,Jquery,Html,Json,如何从JSON数据生成HTML表我有以下JSON数据： [ { name: "Condition" value: "New" }, { name: "Year" value: "2007" }, { name: "Manufacturer" value: "Audi" }, { name: "Model" value: "A4" }, { name: "Type" value:

如何从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个对象。

两个对象创建新行后，再创建下两个对象，依此类推。

如果JSON数据的格式不是最新的，则需要在“值”索引之前添加“，”

<!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>

迭代数据并从中创建DOM元素。您可以通过使用模板引擎（例如）或使用块上的新成员来自动化此过程。您应该开始写一些东西，并发布一些代码作为起点