将json数据转换为html表

将json数据转换为html表,第1张

将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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5014396.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-15

发表评论

登录后才能评论

评论列表(0条)

保存