我有一个数据数组，我需要生成一个html表，
例如，如果星期六=天，它应该在星期六的列下。我附上了预期输出的图片。有人可以建议或者说明如何实现这个目标吗？
数组数据：
“[{”start“：”20170211T123000“，”end“：”20170211T133000“，”summary“：”SA meeting1“，”day“：”SA“ “开始”：“20170106T170000”，“结束”：“20170106T173000”，“摘要”：“星期五会议1”，“日”：“FR” “开始”：“20170106T180000”，“结束”：“20170106T183000”，“摘要”：“星期五会议2”，“日”：“FR” “开始”：“20160614T190000”，“结束”：“20160614T194500”，“摘要”：“Thur meeting2”，“day”：“TH” “开始”：“20160614T190000”，“结束”：“20160614T194500”，“摘要”：“Thur meeting4”，“day”：“TH” “开始”：“20160620T160000”，“结束”：“20160620T164500”，“摘要”：“结婚会议1”，“日”：“我们” “开始”：“20160610T160000”，“结束”：“20160610T163000”，“摘要”：“星期五meetin3”，“day”：“FR” “开始”：“20160614T164500”，“结束”：“20160614T173000”，“摘要”：“Thur meeting3”，“day”：“TH” “开始”：“20160620T181500”，“结束”：“20160620T190000”，“摘要”：“星期三会”，“日”：“我们” “开始”：“20160620T181500”，“结束”：“20160620T190000”，“摘要”：“泰拳跆拳道”，“日”：“我们” “开始”：“20160618T090000”，“结束”：“20160618T094500”，“摘要”：“SA会议3”，“日”：“SA” “开始”：“20160618T094500”，“结束”：“20160618T103000”，“摘要”：“SA会议2”，“日”：“SA” “开始”：“20160613T190000”，“结束”：“20160613T194500”，“摘要”：“星期一会议2”，“日”：“MO” “开始”：“20160613T190000”，“结束”：“20160613T194500”，“摘要”：“星期一会议1”，“日”：“MO” “开始”：“20160613T173000”，“结束”：“20160613T181500”，“摘要”：“tues meeting2”，“day”：“TU” “开始”：“20160613T173000”，“结束”：“20160613T181500”，“摘要”：“会议3”，“日”：“TU”}]“
Html表如图所示。
答案 0 :(得分：2)
这是一种难看的做法。
首先，您需要以实际使用数据的方式对数据进行排序。
让我们创建一个对象dict，使每个属性都是日，其对应的值是相关项的数组。
然后用它来建立你的桌子。
var items = [{
"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"
}];
var dict = {
'MO': [],
'TU': [],
'WE': [],
'TH': [],
'FR': [],
'SA': []
};
// EDIT/TODO: probably want to sort your items here by date before sorting them into the dictionary
// sort the data
items.forEach(function(item) {
if (dict.hasOwnProperty(item.day)) {
dict[item.day].push(item);
}
});
// get maximum number of rows
var rows = Math.max(...[dict.MO.length, dict.TU.length, dict.WE.length, dict.TH.length, dict.FR.length, dict.SA.length]);
// print the table
var html = '<table>';
// create table header
html += '<tr>';
['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].forEach(function(day) {
html += '<th>' + day + '</th>';
});
html += '</tr>';
// create table body
html += '<tr>';
for (var i = 0; i < rows; i++) {
html += '<tr>';
['MO', 'TU', 'WE', 'TH', 'FR', 'SA'].forEach(function(day, j) {
var info = dict[day][i];
html += '<td>' + (info ? info.summary : '') + '</td>';
});
html += '</tr>';
}
html += '</tr>';
html += '</table>';
// put generated HTML into container
output.innerHTML = html;table {
border-collapse: collapse;
border: 1px solid #000;
}
th,
td {
border: 1px solid #000;
}<!-- container to hold table -->
<div id="output"></div>
有关使用Max.max()和传播运算符（...）的信息，请查看last example on this page。
修改
似乎数据没有像你的例子那样完全排序 - 这意味着你需要更多地修复排序逻辑 - 但是这个答案足以让你继续前进。
答案 1 :(得分：2)
这是另一种方法 - 检查底部的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;