将json数据转换为html表[已关闭]
有没有jQuery或javascript库生成给定json数据的动态表？我不想定义列，库应该读取json散列中的键并生成列。
当然，我可以自己遍历json数据并生成html表。我只是想知道是否有这样的库存在，我可以简单地重复使用。
共有2个答案
我已经用vanilla-js重写了您的代码，使用DOM方法来防止html注入。
演示
null
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"
}
]));
谢谢你的回复。我自己写了一个。请注意，这使用了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>-
问题内容： 是否有任何jQuery或javascript库根据给定的json数据生成动态表？我不想定义列，该库应该读取json哈希中的键并生成列。 当然，我可以自己遍历json数据并生成html表。我只想知道是否存在可以简单重用的此类库。 问题答案： 感谢大家的答复，这使用jQuery。 程式码片段：
-
问题内容： 我正在尝试将通过BeautifulSoup提取的表转换为JSON。 到目前为止，尽管我不确定如何从此处处理数据，但我设法隔离了所有行。任何建议将不胜感激。 （为了方便阅读，换行了） 这是我的尝试： 这给了我以下结果： 问题答案： 您的数据可能类似于： 我们可以使用以下代码从中以列表的形式获得您的结果： 要将结果转换为JSON（如果您不关心顺序）： 结果： 如果您需要相同的订单，请使用以
-
问题内容： 我正在尝试将HTML表中存在的数据转换为JSON，以便可以在服务器端进行相应的处理。我可以序列化数据，但是结果充其量只能生成不直接链接的独特数据数组。像：这是我正在使用的形式： 序列化数据的脚本是： 经过数页StackOverFlow之后，我得到了serializeFormJSON（）： 通过使用所有这些，我可以得到像这样的JSON： 我尝试了多种方法以名称-性别格式获取它们，但是每种
-
我有很多HTML表，我正在尝试将其转换为json格式，但我的代码只适用于第一个水平表（第一个图像），而不是第二个垂直表（第二个图像）... 我在这里附上了我的代码和示例表 到目前为止我尝试的代码 以上HTML表的输出： 表2的HTML代码 null 如果表是水平表（表1)，那么旧的输出就足够了 如果表是一个垂直表（表2)，那么输出应该如下所示： 我试过修改代码，但对我没有任何建议？？？
-
我在HTML和CSS方面有一些丰富的经验，但在JS和Jquery方面的经验不多，我希望将JSON数据（在我的例子中是文本和图像）放入HTML表中，但经过几天的研究，似乎没有任何工作对我来说，这是JSON数据。 到目前为止，我尝试了很多不同的代码，但似乎都没有工作，因为1）我不知道如何在“team 1”和“team 2”字段中选择字段“name”；2）我不知道是否可以将团队的图像放在团队名称附近。希
-
问题内容： 有谁知道如何将HTML值表转换为漂亮的JSON对象以使用jQuery进行操作？ 问题答案： HTML表格？就像二维数组中的所有内容一样？ 然后只需使用$ .json（或您想要的任何库）将其转换为JSON字符串即可。 编辑 —重新编写以使用数组原型中的本机（此处为shim）： jQuery 函数具有将返回的数组展平为结果数组的“功能”。也就是说，如果回调函数返回的值本身就是一个数组，则不