是否有jQuery或javascript库根据给定的json数据生成动态表？
我不想定义列，该库应读取json哈希中的键并生成列。 />
当然，我可以自己遍历json数据并生成html表。我只想知道是否存在可以简单重用的此类库。

评论

我认为您正在寻找trirand.com/blog。它使用JSON并将其转换为网格。
好，谢谢您的答复。但是为了满足我的要求，我为自己写了一个。 jsfiddle.net/manishmmulani/7MRx6
您还可以在Github上使用这个简单的项目：Json-To-HTML-Table
在2020年更容易实现，只需使用github.com/arters/Convert-json-data-to-a-html-template

#1 楼

感谢大家的答复。我自己写了一个。请注意，这使用了jQuery。

代码段：



 var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// 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(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table id="excelDataTable" border="1">
  </table>
</body>




评论

嗨@ Manish-mulani，这对我没用，您能再检查一次吗

– Nish
13 Mar 28 '13 at 0:22
@Nish您检查了jsfiddle.net/manishmmulani/7MRx6

– Manish Mulani
13年4月25日在7:13
嗨，我尝试从网址中获取数据，但似乎不起作用

–user4542931
15年6月24日在16:52
你好这个对我有用。但是我有一个问题。为什么没有开头的tr和td标签？谢谢。

– Cyval
16年1月10日在23:58
函数addAllColumnHeaders（myList）-错误。应该是函数addAllColumnHeaders（myList，selector）。顺便说一句，这很完美！

–潜逃者
16-3-21在4:17

#2 楼

我已使用DOM方法在vanilla-js中重写了您的代码，以防止html注入。


 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([{
    "name": "abc",
    "age": 50
  },
  {
    "age": "25",
    "hobby": "swimming"
  },
  {
    "name": "xyz",
    "hobby": "programming"
  }
]));




评论

是否可以使嵌套json对象起作用？

–贾纳克·梅纳（Janac Meena）
16年8月10日在18:49
@JanacMeena我想您需要n维表。

– Oriol
16年8月10日在18:53
确实如此。表格内的表格。另外，我发现了可缩放的树图，该树图允许嵌套json

–贾纳克·梅纳（Janac Meena）
16年8月11日在15:20
同样的功能，但返回一个旋转表，会很漂亮

– ndelucca
17年11月8日在18:12
@Shai使用JSON.parse（yourVariable）并将其发送到buldHTMLTable

–xSx
18/12/17在11:05


#3 楼

您可以使用简单的jQuery jPut插件

http://plugins.jquery.com/jput/ 
<script>
$(document).ready(function(){

var json = [{"name": "name1","email":"email1@domain.com"},{"name": "name2","link":"email2@domain.com"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<table jput="t_template">
 <tbody jput="tbody_template">
     <tr>
         <td>{{name}}</td>
         <td>{{email}}</td>
     </tr>
 </tbody>
</table>

<table>
 <tbody id="tbody">
 </tbody>
</table>


#4 楼

查看JSON的JSON2HTML http://json2html.com/插件。它允许您指定将您的JSON对象转换为HTML模板的转换。在http://json2html.com/上使用builder来获取任何所需html模板的json转换对象。在您的情况下，它将是一个表，其中的行具有以下转换。

示例：

评论

想我会更新这里的链接到json2html.com

–乍得·布朗
2012年12月28日下午4:50
您需要链接node-json2html才能在服务器端NodeJS上工作

– Saad Tahir
9月22日8:43