javascript - 数组数据解析生成HTML表格

Question

我有一个数据数组，我需要从中生成一个 html 表，例如，如果= 星期六，则应位于星期六列下。我附上了预期输出的图片。有人可以建议或提供如何实现这一目标的想法吗？

数组数据:

"[{"start":"20170211T123000","end":"20170211T133000","summary":"SA session 1","day":"SA""start":"20170106T170000","end":"20170106T173000","summary":"星期五 session 1","day":"FR""start":"20170106T180000","end":"20170106T183000","summary":"星期五 session 2","day":"FR""start":"20160614T190000","end":"20160614T194500","summary":"周四 session 2","day":"TH""start":"20160614T190000","end":"20160614T194500","summary":"周四 session 4","day":"TH""start":"20160620T160000","end":"20160620T164500","summary":"婚礼 session 1","day":"我们""start":"20160610T160000","end":"20160610T163000","summary":"星期五 meetin3","day":"FR""start":"20160614T164500","end":"20160614T173000","summary":"周四 session 3","day":"TH""start":"20160620T181500","end":"20160620T190000","summary":"婚礼 session 3","day":"我们""start":"20160620T181500","end":"20160620T190000","summary":"泰拳跆拳道","day":"WE""start":"20160618T090000","end":"20160618T094500","summary":"SA session 3","day":"SA""start":"20160618T094500","end":"20160618T103000","summary":"SA session 2","day":"SA""start":"20160613T190000","end":"20160613T194500","summary":"周一 session 2,"day":"MO""start":"20160613T190000","end":"20160613T194500","summary":"星期一 session 1","day":"MO""start":"20160613T173000","end":"20160613T181500","summary":"周二 session 2","day":"TU""start":"20160613T173000","end":"20160613T181500","summary":"周二 session 3","day":"TU"}]"

Html表格如图所示。

HTML table

Answer 1

这是另一种方法 - 检查底部的 jsfiddle 来运行它...

<table id="week" style="border-collapse: collapse;"> 
</table>
<script>

var headings = {
MO: "Monday",
TU: "Tuesday",
WE: "Wednesday",
TH: "Thursday",
FR: "Friday",
SA: "Saturday"
};

var daylist = [];
var daycnt = [];

var obj = [
{start:"20170211T123000",end:"20170211T133000",summary:"SA meeting1",day:"SA"},
{start:"20170106T170000",end:"20170106T173000",summary:"friday meeting1",day:"FR"},
{start:"20170106T180000",end:"20170106T183000",summary:"friday meeting2",day:"FR"},
{start:"20160614T190000",end:"20160614T194500",summary:"Thur meeting2",day:"TH"},
{start:"20160614T190000",end:"20160614T194500",summary:"Thur meeting4",day:"TH"},
{start:"20160620T160000",end:"20160620T164500",summary:"wed meeting1",day:"WE"},
{start:"20160610T160000",end:"20160610T163000",summary:"friday meetin3",day:"FR"},
{start:"20160614T164500",end:"20160614T173000",summary:"Thur meeting3",day:"TH"},
{start:"20160620T181500",end:"20160620T190000",summary:"wed meeting3",day:"WE"},
{start:"20160620T181500",end:"20160620T190000",summary:"Muay Thai Kickboxing",day:"WE"},
{start:"20160618T090000",end:"20160618T094500",summary:"SA meeting 3",day:"SA"},
{start:"20160618T094500",end:"20160618T103000",summary:"SA meeting 2",day:"SA"},
{start:"20160613T190000",end:"20160613T194500",summary:"Monday meeting2",day:"MO"},
{start:"20160613T190000",end:"20160613T194500",summary:"Monday meeting1",day:"MO"},
{start:"20160613T173000",end:"20160613T181500",summary:"tues meeting2",day:"TU"},
{start:"20160613T173000",end:"20160613T181500",summary:"tues meeting 3",day:"TU"}];


// start by sorting the data into time order
function compare(a,b) {
  if(a.start < b.start)
    return -1;
  if (a.start > b.start)
    return 1;
  return 0;
}
obj.sort(compare);

// first, setup the headers
var insert = "<tr>";
Object.keys(headings).forEach(function(key) {
  insert += "<th style='border:1px solid #000'>" + headings[key] + "</th>";
  daycnt[key] = 0;
  daylist[key] = {};
});

// now build up an array for each day of the week
var maxcnt = 0;
for(var i=0;i<obj.length;i++) {
  var day = obj[i].day;
  var index = daycnt[day];
  daylist[day][index] = obj[i].summary;
  daycnt[day] = daycnt[day] + 1;
  if(daycnt[day] > maxcnt) maxcnt = daycnt[day];
}

// now fill the table columns
for(var i=0; i<maxcnt; i++) {
  insert += "<tr>";
  Object.keys(headings).forEach(function(key) {
    if(daycnt[key]<=i)
      insert += "<td style='border:1px solid #000;padding:4px;'></td>";
    else
      insert += "<td style='border:1px solid #000;padding:4px;'>" + daylist[key][i] + "</td>";
  });
  insert += "</tr>";
}

document.getElementById("week").innerHTML = insert;

https://jsfiddle.net/FrancisMacDougall/sr6zfpbo/