浏览器中是否有相同的`console.table`？

Question

console.table完全符合我的需要。 但我希望该表在浏览器中输出。 我怎样才能做到这一点？

我尝试过其他一些不起作用的解决方案，因为：

1. 他们期待一系列对象。
2. 列不是动态确定的（即我的对象并不都具有道具）。

我的对象看起来像这样：

{
  source0: {target0: 2, target1: 2, target2: 1},
  source1: {target1: 3},
  /*...*/
}

Answer 1

这是一个解决方案，有两个迭代，第一个用于查找列，第二个用于构建表：

var s = {
  source0: {target0: 2, target1: 2, target2: 1},
  source1: {target1: 3},
}

var cols = [];
for (var k in s) {
  for (var c in s[k]) {
    if (cols.indexOf(c)===-1) cols.push(c);
  }
}
var html = '<table><tr>'+
    cols.map(function(c){ return '<th>'+c+'</th>' }).join('')+
    '</tr>';
for (var l in s) {
  html += '<tr>'+
      cols.map(function(c){ return '<td>'+(s[l][c]||'')+'</td>' }).join('')+
      '</tr>';
}
html += '</table>';

示范

当然，你必须根据你的确切需要定制它。 例如，如果您想拥有属性的键 。

Answer 2

你应该使用模板系统。

以下是Handlebars.js http://jsfiddle.net/x6r5fbw1/的示例（您也可以在下面运行代码段）

  $(function(){ var data = { source0: {target0: 2, target1: 2, target2: 1}, source1: {target1: 3}, }, table = [], colsDict = {}, key = "", innerKey = "", tableData = [], tmp = Handlebars.compile($("#template").text()), html = ""; for (key in data) { if (data.hasOwnProperty(key)) { table.push({title:key}); for (innerKey in data[key]){ if (data[key].hasOwnProperty(innerKey)) { table[table.length-1][innerKey] = data[key][innerKey]; colsDict[innerKey] = ""; } } } } var cols = ["title"]; for (key in colsDict){ if (colsDict.hasOwnProperty(key)){ cols.push(key); } } for (key in table){ var obj = {}; for (innerKey in cols){ if (table[key].hasOwnProperty(cols[innerKey])) { obj[cols[innerKey]] = table[key][cols[innerKey]]; } else{ obj[cols[innerKey]] = ""; } } tableData.push(obj); } html = tmp({cols: cols, rows:tableData}); $("#target").html(html); }); 

  <div id="target"></div> <script language="text/template" id="template"> <table> <tr> {{#each cols}} <th>{{this}}</th> {{/each}} </tr> {{#each rows}} <tr> {{#each this}} <td>{{this}}</td> {{/each}} </tr> {{/each}} </table> </script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>