栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

将json数据转换为html表

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/404984.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号