无法从 JSON 创建动态表答案

【问题标题】：Can't create dynamic table from JSON无法从 JSON 创建动态表
【发布时间】：2016-07-07 12:29:52
【问题描述】：

如何从这些对象中使用 JQuery 创建动态表

对象为数组类型，存储每一列数据。

我想要这样的桌子：

+--Start_Hour--Start_Minutes--Start_Month--+ | 11 | 00 | 07 --| | 03 | 03 | 03 --|

是的，但它的代码很糟糕:(

function GenerateHolidayTable(data) {
  var name, number;
  var HolidayTableHTML = '';
  HolidayTableHTML += '<table class="table"><tr><th>Start_Month</th><th>Start_Day</th><th>Start_Hour</th><th>Start_Min</th><th>End_Month</th><th>End_Day</th><th>End_Hour</th><th>End_Min</th> <th>Description</th></tr>';
  $.each(data, function(key, value) {
    if (key == "Start_Month") {
      HolidayTableHTML += '<tr>';
      $.each(value, function(key, value) {
        HolidayTableHTML += '<td>' + value + ' </td>';
      });
    }
    ..................................
    else if (key == "Description") {
      $.each(value, function(key, value) {
        HolidayTableHTML += '<td>' + value + ' </td>';
      });
      HolidayTableHTML += '</tr>';
    }
  });
  HolidayTableHTML += '</table>';
  $('#HolidayTable').append(HolidayTableHTML);
}

【问题讨论】：

你尝试过编写代码吗？
这不仅仅是糟糕的代码。如果我认为$('#HolidayTable') 是<table>，那么您只需在其中添加另一个表。
那好吧。查看@anu 的答案。它会让你走上正轨。
你的代码到底有什么问题？
所有元素在一行中生成。我不知道如何从该数据结构中创建新行。

标签： javascript jquery json

【解决方案1】：

你可以这样做：

假设所有三个（Start_Month、Start_Hour 和 Start_Minutes）将具有相同的长度。

var json = "{\"Start_Month\": {\"1\" :\"1\",\"2\" :\"2\",\"3\" :\"3\"},\"Start_Minutes\": {\"1\" :\"10\",\"2\" :\"20\",\"3\" :\"30\"},\"Start_Hour\": {\"1\" :\"01\",\"2\" :\"02\",\"3\" :\"03\"}}";
var jsonObj = JSON.parse(json);
$.each(jsonObj.Start_Hour, function(idx, val) {
  var row = "<tr>";
  row += "<td>" + val + "</td>";
  row += "<td>" + jsonObj.Start_Minutes[idx] + "</td>";
  row += "<td>" + jsonObj.Start_Month[idx] + "</td>";
  row += "</tr>";
  $("#data").append(row);
});

table {
  width: 100%;
}
table,
td,
th {
  border: 2px lightblue solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Start_Hour</th>
      <th>Start_Minutes</th>
      <th>Start_Month</th>
    </tr>
  </thead>
  <tbody id="data"></tbody>
</table>

【讨论】：

嗯是有道理的。我错过了Start_Hour等是单个数组的json结构。+1

【解决方案2】：

您是否研究过诸如 Mustache JS 之类的 javascript 模板系统？

因为它会让这样的事情相对容易做到。

【讨论】：