从Json Pure javascript创建表 [英] Create table from Json pure javascript

问题描述

我有一个具有多个可以更改的键的Json，如下所示:

I have a Json with multiple keys that can change, something like this:

Var children = [{num = 6, name = me, phone = 7}, {num = 8, name = him, phone = 9}]

我想要一个带有标题(数字，名称，电话)的表

And I want a table with the headers (num, name, phone)

仅使用JavaScript怎么办? (没有JQuery)

How can I do it with only JavaScript? (No JQuery)

推荐答案

var children = [{num: 6, name: 'me', phone: 7}, {num: 8, name: 'him', phone: 9}];

function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var table = document.createElement('table');
for( var i = 0; i < children.length; i++ ) {

  var child = children[i];
  if(i === 0 ) {
    addHeaders(table, Object.keys(child));
  }
  var row = table.insertRow();
  Object.keys(child).forEach(function(k) {
    console.log(k);
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('container').appendChild(table);

<div id="container"></div>

这篇关于从Json Pure javascript创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！