使用 Javascript 创建基于 JSON 的表答案

【问题标题】：Create table based on JSON with Javascript使用 Javascript 创建基于 JSON 的表
【发布时间】：2018-06-17 12:44:25
【问题描述】：

我有一些 JSON 想要放入表格中，但 dict 中的一项应该在顶部的单独表格中。

{
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
}

我想循环遍历测试字典并从它们下面解析表格，如下所示：

我让它适用于 1/2/3/4/5 表，但我也无法将上面一行放入代码中......与：

$(function() {
  var tbody = $("<tbody />"),
    tr;
  $.each(trades, function(_, obj) {
    tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>")
    });
    tr.appendTo(tbody);
  });
  tbody.appendTo("#trades_table");

})

<table class="table" id="trades_table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

【问题讨论】：

标签： javascript html json html-table

【解决方案1】：

您需要做的就是在像这样遍历数组之前附加一个row 和5 的colspan，并将文本作为键值：

var trades={
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
};
$(function() {
  var tbody = $("<tbody />"),
    tr;
  $.each(trades, function(_, obj) {
    tr = $("<tr />");
    tr.append("<td colspan='5' align='center'>" + _ + "</td>")
    tr.appendTo(tbody);
    tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>")
    });
    tr.appendTo(tbody);
  });
  tbody.appendTo("#trades_table");

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="trades_table"  border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

更新为将col3 作为标题

var trades={
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
};
$(function() {
  var tbody = $("<tbody />"),
    tr;
  $.each(trades, function(_, obj) {
    tr = $("<tr />");
    tr.append("<td colspan='5' align='center'>" + obj['col3'] + "</td>")
    tr.appendTo(tbody);
    tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>")
    });
    tr.appendTo(tbody);
  });
  tbody.appendTo("#trades_table");

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="trades_table"  border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

【讨论】：

天哪，一个人能有多快！太感谢了太感谢了！！！！！！多年来一直在尝试。
可以，新帐户需要一些时间。又来了！
是否也可以将其中一个 col 的值作为基于上层的表头？例如，将 col3 设为标题
这不起作用，因为 obj[2] 在使用 colspan 创建单独的 col 后处于循环中

【解决方案2】：

您可以简单地遍历 JSON 并为每次出现创建一个新表。您可以使用Object.keys(YOUR_OBJ).length 找到列数：

var obj = {
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
};

$.each(obj,function(k,v){
  var table = $(`
    <table>
      <thead>
        <tr><th colspan="`+Object.keys(v).length+`">`+k+`</th></tr>
      </thead>
      <tbody>
        <tr></tr>
      </tbody>
    </table>
  `);
  
  $.each(v,function(k2,v2){
    $('tbody tr',table).append('<td>'+v2+'</td>');
  });
  
  table.appendTo('body');
});

table{
 width: 200px;
 margin-bottom: 20px;
}

td,th{
  text-align: center;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：