Question

我有一个Json，其中有多个键可以更改，如下所示：

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

我想要一个包含标题（num，name，phone）

的表格

如何只用JavaScript做到这一点？（没有JQuery）

Answer 1

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

Javascript

var _table_ = document.createElement('table'),
    _tr_ = document.createElement('tr'),
    _th_ = document.createElement('th'),
    _td_ = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable(arr) {
     var table = _table_.cloneNode(false),
         columns = addAllColumnHeaders(arr, table);
     for (var i=0, maxi=arr.length; i < maxi; ++i) {
         var tr = _tr_.cloneNode(false);
         for (var j=0, maxj=columns.length; j < maxj ; ++j) {
             var td = _td_.cloneNode(false);
                 cellValue = arr[i][columns[j]];
             td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
             tr.appendChild(td);
         }
         table.appendChild(tr);
     }
     return table;
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(arr, table)
 {
     var columnSet = [],
         tr = _tr_.cloneNode(false);
     for (var i=0, l=arr.length; i < l; i++) {
         for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                 columnSet.push(key);
                 var th = _th_.cloneNode(false);
                 th.appendChild(document.createTextNode(key));
                 tr.appendChild(th);
             }
         }
     }
     table.appendChild(tr);
     return columnSet;
 }


document.body.appendChild(buildHtmlTable([
    {"num" : "6", "name" : "me", "phone" : "7"},
    {"num" : "8", "name" : "him", "phone" : "9"}
]));

<强> CSS

  th, td {
      border: 1px solid;
  }
  th {
      font-weight : bold
  }

Answer 3

以下方法将基于json绘制表格。首先复制javascript和html

javascript

<script type="text/javascript">
function jsonToTable(json) {
  var parsejson=JSON.parse(json);
  var columns=[];
  var tablethread="<thead><tr>";
  for (x in parsejson[0]) {
    columns.push(x);
    tablethread+="<th>"+x+"</th>";
  }
  tablethread+="</tr></thead>";
  document.getElementById("tableID").innerHTML=tablethread;
  var table_rows='<tbody>';
  for (var i = 0; i < parsejson.length; i++) {
    var x= parsejson[i];
      var json2=x;
      var row="<tr>"
        for (d in x) {
          var sty=x[d];
          if (sty!=null) {
            var st=sty.toString();
            var reps='<\\';    
            row+="<td><p>"+st.split('<').join('&lt;')+"</p></td>";
          }
          else {
            row+="<td><p>null</p></td>";
          }
        }
      row+="</tr>"
      table_rows+=row;
  }
  table_rows+='</tbody>';
  document.getElementById("tableID").innerHTML+=table_rows;
}
</script>

HTML

<table id="tableID" class="table"></table>

立即调用方法

jsonToTable("YOUR_JSON");

示例

var jsonstring = '[{ "name":"John", "age":30, "car":"BMW"},'+
'{ "name":"Wick", "age":50,"car":"DODGE" }]';

jsonToTable(jsonstring);

从Json纯javascript创建表

3 个答案: