Question

我有一个JSON数据，如下所示。我需要使用javascript从这个JSON生成一个表。对我来说最难的部分是将每个元素显示为一列。请帮我解决。

JSON：

[
 {
   "Header": "Column1",
   "Values": [
     "75",
     "79",
     "83"
   ]
 },
 {
   "Header": "Column2",
   "Values": [
     "77",
     "81",
     "86",
     "90"
   ]
 },
 {
   "Header": "Column3",
   "Values": [
     "98",
     "117"
   ]
 }
]

我想以下表格式显示此数据

|Column1|Column2|Column3|
-------------------------
| 75 | 77 | 98  |
| 79 | 81 | 117 |
| 83 | 86 |     |
|    | 90 |     |

实现目标的最佳途径是什么？

Answer 1

您可以首先获取表格的标题，并在迭代列名称时，您可以收集每个数据数组的长度并获取其最大长度，以便稍后迭代td元素。

＆＃13;

var data = [{ Header: "Column1", Values: ["75", "79", "83"] }, { Header: "Column2", Values: ["77", "81", "86", "90"] }, { Header: "Column3", Values: ["98", "117"] }],
    table = document.createElement('table'),
    tr = document.createElement('tr'),
    rows = [],
    max = 0,
    i;

table.appendChild(tr);
data.forEach(function (o) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(o.Header));
    tr.appendChild(th);
    max = Math.max(max, o.Values.length);
});
for (i = 0; i < max; i++) {
    tr = document.createElement('tr'),        
    table.appendChild(tr);
    data.forEach(function (o) {
        var td = document.createElement('td');
        tr.appendChild(td);
        td.appendChild(document.createTextNode(i in o.Values ? o.Values[i] : ''));
    });
}
document.body.appendChild(table);

＆＃13;

Answer 2

你必须使用DOM方法和嵌套for循环来实现这一点。

var tableJSON = [
 {
   "Header": "Column1",
   "Values": [
     "75",
     "79",
     "83"
   ]
 },
 {
   "Header": "Column2",
   "Values": [
     "77",
     "81",
     "86",
     "90"
   ]
 },
 {
   "Header": "Column3",
   "Values": [
     "98",
     "117"
   ]
 }
];

var tableDiv = document.createElement("table");
 var trElement =  document.createElement("tr");
 tableDiv.appendChild( trElement );

var prDiv = document.getElementById("pr");
tableJSON.forEach(function(a_column, index){
if(a_column.Header)
	{
  var tdElement =  document.createElement("td");
  tdElement.innerHTML = "<b>" + a_column.Header + "</b>";
  trElement.appendChild( tdElement );
  }
  if(a_column.Values){
  var allRows = tableDiv.childNodes;
  
  for(var i=0 ;i< a_column.Values.length; i++)
  {
  var rowWanted = allRows[i+1];
  if( !rowWanted )
  {
  	rowWanted = document.createElement("tr");
   	tableDiv.appendChild( rowWanted );
  }
  if(rowWanted.childNodes.length==0)
  	for(var j=0; j< tableJSON.length; j++){
    rowWanted.appendChild( document.createElement("td") );
    }
  
  rowWanted.childNodes[ index ].innerHTML = a_column.Values[i];
  }
}
});
prDiv.appendChild(tableDiv);

<div id="pr">


</div>

Answer 3

这是你如何开始它。 1.浏览数据并收集标题，在这里制作 th 的HTML。

2.浏览数据并收集行条目，在此处为 tr 制作HTML。

代码：

    var data = [{
        "Header": "Column1",
        "Values": [
            "75",
            "79",
            "83"
        ]
    }, {
        "Header": "Column2",
        "Values": [
            "77",
            "81",
            "86",
            "90"
        ]
    }, {
        "Header": "Column3",
        "Values": [
            "98",
            "117"
        ]
    }];

    var table_headers = "<tr>";
    for(var i=0;i<data.length;i++){
        table_headers = table_headers + "<td>" + data[i].Header + "</td>";
    }
    trs = trs + "</tr>";

    var table = document.createElement('table');
    table.innerHTML = table_headers;

现在，您已经准备好了类似的迭代并收集数据，并将整个表附加到HTML的正文中。

这是我能想到的一种方式。看看这是否有帮助。

注意：在发布之前搜索一下类似的问题，可能会有一些想法可以帮助您解决问题。：）

Answer 4

试试这个代码！这将帮助您生成所需的输出。

<div id="tables">

</div>
<script type="application/javascript"> 

    var jsonStr = '[{"Header": "Column1","Values": ["75","79","83"]},{"Header": "Column2","Values": ["77","81","86","90"]},{"Header": "Column3","Values": ["98","117"]}]';
    var parsJson = JSON.parse(jsonStr);
    var output = '';
    for (var i = 0; i < parsJson.length; i++) {
        output += '<table border="1" style="float:left"><tr><td>' + parsJson[i]['Header'] + '</td></tr>';
        for (var j = 0; j < parsJson[i]['Values'].length; j++) {
            output += '<tr><td>' + parsJson[i]['Values'][j] + '</td></tr>';
        }
        output += '</table>';
        console.log(output);
        document.getElementById('tables').innerHTML = output;
    }
</script>

在javascript中从json数组动态生成表

4 个答案: