转换JSON数据到一个HTML表
有没有任何jQuery或JavaScript库，生成一个给定json数据的动态表？ 我不想定义列，库应该读取json散列中的键并生成列。
当然，我可以自己迭代json数据并生成html表格。 我只想知道是否有这样的图书馆存在，我可以简单地重用。
谢谢你的回复。 我自己写了一个。 请注意，这使用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>
我用vanilla-js重写了你的代码，使用DOM方法来防止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; }
你可以使用简单的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>
查看JSON2HTML http://json2html.com/插件的jQuery。; 它允许您指定一个将您的JSON对象转换为HTML模板的转换。 使用http://json2html.com/上的生成器来获取任何所需的html模板的json转换对象。; 在你的情况下，这将是一个行，有以下转换表。
例：
var transform = {"tag":"table", "children":[ {"tag":"tbody","children":[ {"tag":"tr","children":[ {"tag":"td","html":"${name}"}, {"tag":"td","html":"${age}"} ]} ]} ]}; var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24} ]; $('#target_div').html(json2html.transform(data,transform));
