javascript - 将json数据转换为html表

标签 javascript html json html-table

是否有任何 jQuery 或 javascript 库可以在给定 json 数据的情况下生成动态表? 我不想定义列,库应该读取 json 哈希中的键并生成列。

当然,我可以自己遍历json数据,生成html表。我只想知道是否存在这样的库,我可以简单地重复使用。

最佳答案

感谢大家的回复。 I wrote one myself.请注意,这使用了 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>

关于javascript - 将json数据转换为html表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5180382/

相关文章:

json - 我希望 Swift 程序中 "self.q"中的值也能打印到 xcode 控制台

javascript - 使用javascript将base64字符串转换为图像

javascript - 分割URL字符串以获取javascript中的每个参数值

JavaScript 和 DOM 按钮事件处理

javascript - 通过javascript检测浏览器换行

javascript - 如何将微调页面与其余 HTML 集成

Javascript:如何获取函数的值?

javascript - 在调用 sendToDevice 之前,将 Promise.All 与 Firebase Cloud Fxs 结合使用,用 FCM token 填充数组

php - 如何在不刷新页面的情况下更新 HTML data-* 属性

json - 使用 jq 将记录添加到特定索引处的数组元素