在表列中动态显示对象数组 - Javascript

Question

我正在尝试创建预约时段选择网格。我已将所有约会按日期分组。我想将下面的对象数组显示为可点击的网格。我拥有我需要的一切，但我很难在列中显示它。我目前的输出：

如您所见，它在正确的日期标题旁边显示了正确的约会，但是它在同一行中添加了下一个约会，依此类推。我希望每个日期及其相应的约会显示在单独的列中。顶部的日期标题，下面列出了约会。我只是使用一个 main.js 文件和一个 index.html 文件。

下面的分组预约空档数组看起来像这样：

2020-09-25: [{0:{AppointmentDateTime: "2020-09-25T13:00:00Z"}}]

2020-09-28: [{0:{AppointmentDateTime: "2020-09-28T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-28T10:30:00Z"}}, {2:{AppointmentDateTime: "2020-09-28T11:00:00Z"}}]

2020-09-29: [{0:{AppointmentDateTime: "2020-09-29T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-29T09:00:00Z"}}, {2:{AppointmentDateTime: "2020-09-29T11:00:00Z"}}]

这是我到目前为止所拥有的：

let result = await response.json();

let groupedAppointments = {}

result.forEach((item) => {

    const date = item.AppointmentDateTime.split('T')[0]

    if (groupedAppointments[date]) {

        groupedAppointments[date].push(item);

    } else {

        groupedAppointments[date] = [item];

    }

})

var grid = clickableGrid(groupedAppointments, groupedAppointments, function(el, item) {

    console.log("You clicked on element:", el);

    selectedAppointment = item.AppointmentDateTime;

    console.log(selectedAppointment);

    el.className = 'clicked';

    if (lastClicked) lastClicked.className = '';

    lastClicked = el;

});

document.getElementById("clickable-grid").appendChild(grid);

function clickableGrid(groupedAppointments, index, callback) {

    var i = 0;

    var grid = document.createElement('table');

    grid.className = 'grid';

    Object.keys(groupedAppointments).forEach((item) => {

        var days = groupedAppointments[item];

        var tableRowHeader = grid.appendChild(document.createElement('tr'));

        var th = tableRowHeader.appendChild(document.createElement('th'));

        th.innerHTML = item;

我希望这是足够的细节。有任何问题就问。非常感谢所有帮助。

Answer 1

您不应该tr为每个约会创建一个。你需要两个循环。一个循环创建包含所有日期的标题行。然后循环遍历数组索引以创建数据行。在其中，每个日期都有一个嵌套循环，填充行中的该列。由于日期会有不同数量的约会，因此您需要检查当前日期是否有那么多约会。如果是，则填写单元格，否则将其留空。function clickableGrid(groupedAppointments, callback) {&nbsp; var i = 0;&nbsp; var grid = document.createElement('table');&nbsp; grid.className = 'grid';&nbsp; var longest = 0;&nbsp; var headerRow = grid.appendChild(document.createElement('tr'));&nbsp; Object.entries(groupedAppointments).forEach(([item, day]) => {&nbsp; &nbsp; if (day.length > longest) {&nbsp; &nbsp; &nbsp; longest = day.length;&nbsp; &nbsp; }&nbsp; &nbsp; var th = headerRow.appendChild(document.createElement('th'));&nbsp; &nbsp; th.innerHTML = item;&nbsp; });&nbsp; for (let i = 0; i < longest; i++) {&nbsp; &nbsp; var tr = grid.appendChild(document.createElement('tr'));&nbsp; &nbsp; Object.values(groupedAppointments).forEach(item => {&nbsp; &nbsp; &nbsp; var cell = tr.appendChild(document.createElement('td'));&nbsp; &nbsp; &nbsp; if (i < item.length) {&nbsp; &nbsp; &nbsp; &nbsp; let time = item[i].AppointmentDateTime.split('T')[1].split('Z')[0];&nbsp; &nbsp; &nbsp; &nbsp; cell.innerHTML = time;&nbsp; &nbsp; &nbsp; &nbsp; cell.addEventListener('click', (function(el, item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(el, item);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })(cell, item[i]), false);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp; return grid;}var data = {&nbsp; "2020-09-25": [{&nbsp; &nbsp; AppointmentDateTime: "2020-09-25T13:00:00Z"&nbsp; }],&nbsp; "2020-09-28": [{&nbsp; &nbsp; AppointmentDateTime: "2020-09-28T08:00:00Z"&nbsp; }, {&nbsp; &nbsp; AppointmentDateTime: "2020-09-28T10:30:00Z"&nbsp; }, {&nbsp; &nbsp; AppointmentDateTime: "2020-09-28T11:00:00Z"&nbsp; }],&nbsp; "2020-09-29": [{&nbsp; &nbsp; AppointmentDateTime: "2020-09-29T08:00:00Z"&nbsp; }, {&nbsp; &nbsp; AppointmentDateTime: "2020-09-29T09:00:00Z"&nbsp; }, {&nbsp; &nbsp; AppointmentDateTime: "2020-09-29T11:00:00Z"&nbsp; }]};document.body.appendChild(clickableGrid(data, function(cell, date) {&nbsp; console.log("You clicked on " + date.AppointmentDateTime);}));

Answer 2

看起来你的表到处都是，你创建了 2 个表行，而实际上你只需要为每个日期使用一个行（包括第 th 次和约会）并且你只需要在新日期时转到新行被呈现。我更改了一些命名以使其更精确（项目并没有说明它是什么，而且当您对不同的参数使用相同的名称时它会变得混乱）。我注释掉的行标有*.function clickableGrid(groupedAppointments, index, callback) {&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var grid = document.createElement('table');&nbsp; &nbsp; grid.className = 'grid';&nbsp; &nbsp; Object.keys(groupedAppointments).forEach((date) => {&nbsp; &nbsp; &nbsp; &nbsp; //*var days = groupedAppointments[key]; --> since you don't copy and just refferencing a memory slot&nbsp; &nbsp; &nbsp; &nbsp; var tr = grid.appendChild(document.createElement('tr')); // renamed to tr because you need to have only one row, both for the header and the data&nbsp; &nbsp; &nbsp; &nbsp; var th = tr.appendChild(document.createElement('th'));&nbsp; &nbsp; &nbsp; &nbsp; th.innerHTML = date;&nbsp; &nbsp; &nbsp; &nbsp; groupedAppointments[date].forEach((appointment) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //*var tr = grid.appendChild(document.createElement('tr')); --> cell and table hadder are in the same row&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //var rowHeader = tr.appendChild(document.createElement('th'))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell = tr.appendChild(document.createElement('td'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //rowHeader.innerHTML = appointment.SlotName;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.innerHTML = appointment.AppointmentDateTime;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.addEventListener('click', (function(el, appointment) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(el, appointment);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })(cell, appointment), false);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; &nbsp; return grid;}希望它有所帮助:)