将json数据转换为html表格 [英] Convert json data to a html table
本文介绍了将json数据转换为html表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有任何jQuery或JavaScript库生成给定json数据的动态表？
我不想定义列，库应该读取json散列中的键并生成列。
当然，我可以自己迭代通过json数据并生成html表格。我只是想知道是否有这样的库存在，我可以简单地重用。 解决方案
感谢所有您的答复。 我自己写了一个。请注意，它使用jQuery。
代码片段：
var myList = [{name：abc，age：50} ，{age：25，hobby：swimming}，{name：xyz，hobby：programming}]; //构建HTML表格myList.function buildHtmlTable （选择器）{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 =;行$ .append（$（< TD />。）的HTML（cellValue））; } $（selector）.append（row $）; }} //向表中添加一个标题行并返回该列的集合//需要对所有记录中的键进行联合，因为某些记录可能不包含所有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（键））; }}} $（selector）.append（headerTr $）;返回columnSet;}
< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script>< ;body onLoad =buildHtmlTable（'＃excelDataTable'）> < table id =excelDataTableborder =1> < / body>
Is there any jQuery or javascript library that generates a dynamic table given json data? I don't want to define the columns, the library should read the keys in the json hash and generate columns.
Of course, I can myself iterate through the json data and generate the html table. I just want to know if any such library exists which I can simply reuse.
解决方案
Thanks all for your replies. I wrote one myself. Please note that this uses jQuery.
Code snippet:
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>
这篇关于将json数据转换为html表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
